Check the documentation for React Native Keyboard Avoiding View. It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard. It can automatically adjust either its position or bottom padding based on the position of the keyboard. Example from the How to make … Read more
add color: ‘green’; in your TextInput style will change the color <TextInput style={styles.textInput} /> const styles = StyleSheet.create({ textInput: { color: ‘green’, }, });` in native-base you will need to take care also of theming see docs
For RN 0.60+ don’t use react-native link …! (see Autolinking) Instead add this in your Podfile: pod ‘RNVectorIcons’, :path => ‘../node_modules/react-native-vector-icons’ and run pod update (or pod install). Furthermore add this in your Info.plist: <key>UIAppFonts</key> <array> <string>AntDesign.ttf</string> <string>Entypo.ttf</string> <string>EvilIcons.ttf</string> <string>Feather.ttf</string> <string>FontAwesome.ttf</string> <string>FontAwesome5_Brands.ttf</string> <string>FontAwesome5_Regular.ttf</string> <string>FontAwesome5_Solid.ttf</string> <string>Foundation.ttf</string> <string>Ionicons.ttf</string> <string>MaterialIcons.ttf</string> <string>MaterialCommunityIcons.ttf</string> <string>SimpleLineIcons.ttf</string> <string>Octicons.ttf</string> <string>Zocial.ttf</string> </array> (took from https://github.com/oblador/react-native-vector-icons#option-with-cocoapods) … Read more
Not Using Expo If you are using React Native without Expo, or an Expo app which has been ejected, you can use the react-native-device-info package. It has a hasNotch() function which works pretty well at detecting such devices. The Native Base Content, Footer and Header components inspect an isIphoneX theme variable to determine whether or … Read more
Just add useNativeDriver: true to the animation config. const [animatePress, setAnimatePress] = useState(new Animated.Value(1)) const animateIn = () => { Animated.timing(animatePress, { toValue: 0.5, duration: 500, useNativeDriver: true // Add This line }).start(); } UPDATED Solution: As the warning says, we need to specify the useNativeDriver option explicitly and set it to true or false … Read more
You can use the flex property, justifyContent to achieve this. Full documentation here. <View style={{justifyContent: ‘center’}}> <Text>Vertically Centered Text</Text> </View>
Just kill all node process and start npm server and run application: Step1: run command killall -9 node For windows users, run: taskkill /im node.exe Run taskkill /f /im node.exe if the process still persists. Step2: run command npm start –reset-cache Step3: run command react-native run-ios OR react-native run-android