Comments (2)
Any update on this guys? This is a serious issue to be worked on :/ Still not working with:
"react-native-switch": "^1.5.0"
"react-native": "0.59.9"
from react-native-switch.
Hey am I doing something wrong here? the animation seems really bad.
(https://imgflip.com/gif/4mel7q)
import React from "react";
import { View } from "react-native";
import { Switch } from "react-native-switch";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import colors from "../config/colors.js";
export default function SwitchFilter({ onChange, value }) {
return (
<View
style={{
flexDirection: "row",
}}
>
<Switch
value={value}
onValueChange={onChange}
disabled={false}
activeText={"Less Than"}
inActiveText={"Greater Than"}
circleSize={30}
barHeight={25}
circleBorderWidth={1}
backgroundActive={colors.dark}
backgroundInactive={colors.dark}
activeTextStyle={{
color:'red'
}}
inactiveTextStyle={{
color:'green'
}}
renderInsideCircle={() => (
<MaterialCommunityIcons
color={colors.dark}
name={value ? "less-than" : "greater-than"}
size={20}
/>
)} // custom component to render inside the Switch circle (Text, Image, etc.)
innerCircleStyle={{
color:'green',
backgroundColor:colors.mediumLight,
alignItems: "center", justifyContent: "center",
borderWidth:1,
borderColor:'white',
}} // style for inner animated circle for what you (may) be rendering inside the circle
outerCircleStyle={{
borderWidth:1,
borderColor:'white',
borderRadius:10,
paddingRight: value ? 0 : 15,
paddingLeft: value ? 15 : 0,
marginLeft: value ? -20 : 15,
}} // style for outer animated circle
// renderActiveText={false}
// renderInActiveText={false}
// switchLeftPx={2} // denominator for logic when sliding to TRUE position. Higher number = more space from RIGHT of the circle to END of the slider
// switchRightPx={12} // denominator for logic when sliding to FALSE position. Higher number = more space from LEFT of the circle to BEGINNING of the slider
switchWidthMultiplier={value ? 3.3 : 3.8} // multipled by the `circleSize` prop to calculate total width of the Switch
// switchBorderRadius={10} // Sets the border Radius of the switch slider. If unset, it remains the circleSize.
/>
</View>
);
}
from react-native-switch.
Related Issues (20)
- Update TouchableWithoutFeedback to Pressable so React Native Web accessibility properties can be used HOT 1
- Deleted unsed import variables from Switch.js
- Switch not visually toggling in drawer navigator but state is changing HOT 2
- active and inactive text is not showing in switch HOT 3
- activeText is showing instead of the text we pass HOT 4
- How to change border color of circle HOT 1
- How can i add the shadow in circle?
- Rendering activeText BUG HOT 2
- CircleBorderColor option is not there HOT 4
- ive switch HOT 2
- The width of a switcher changes but the circle stays on it's place HOT 1
- useNativeDriver warning react-native 0.63.0 HOT 16
- typescript bag syntax
- React-native-web compatibility Issue
- Warning: Failed prop type: Invalid prop `activeTextStyle` of type `array` supplied to `Switch`, expected `object` HOT 1
- How to test Switch component HOT 2
- React Native warning Animated: 'useNativeDriver' HOT 8
- [Feature] Reduce the number of props
- cannot customize background of switch
- switch toggle is working very slow in Android HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-switch.