Change React-Native TextInput’s placeholder color
Like so: <TextInput placeholder=”something” placeholderTextColor=”#000″ />
react-native
Facing issue ” Failed to install the app. Make sure you have the Android development environment ” in react native
I was receiving this error message when running react-native run-android. When I ran cd android && ./gradlew clean I was getting permission errors also. I ran chmod +x gradlew and it started working
Detect ScrollView has reached the end
I did it like this: import React from ‘react’; import {ScrollView, Text} from ‘react-native’; const isCloseToBottom = ({layoutMeasurement, contentOffset, contentSize}) => { const paddingToBottom = 20; return layoutMeasurement.height + contentOffset.y >= contentSize.height – paddingToBottom; }; const MyCoolScrollViewComponent = ({enableSomeButton}) => ( <ScrollView onScroll={({nativeEvent}) => { if (isCloseToBottom(nativeEvent)) { enableSomeButton(); } }} scrollEventThrottle={400} > <Text>Here is … Read more
React-Native run-android on specific device
To run react-native application on optional device you can specify some flags in run command. To see available add –help: react-native run-android –help Then you can specify your device id throught –deviceId react-native run-android –deviceId=DEVICE_ID To see available devices ids’ adb devices
React Native onPress being called automatically
try to change onPress={this.handleRoute(‘x’)} // in this case handleRoute function is called as soon as render happen to onPress={() => this.handleRoute.bind(‘x’)} //in this case handleRoute doesn’t called as soon as render happen
react native get TextInput value
The quick and less optimized way to do this is by using arrow function inside your onChangeText callback, by passing username as your argument in your onChangeText callback. <TextInput ref= {(el) => { this.username = el; }} onChangeText={(username) => this.setState({username})} value={this.state.username} /> then in your _handlePress method _handlePress(event) { let username=this.state.username; } But this has … Read more
How to loop and render elements in React-native?
You would usually use map for that kind of thing. buttonsListArr = initialArr.map(buttonInfo => ( <Button … key={buttonInfo[0]}>{buttonInfo[1]}</Button> ); (key is a necessary prop whenever you do mapping in React. The key needs to be a unique identifier for the generated component) As a side, I would use an object instead of an array. I … Read more
What is react-native link?
Note: from React-Native 0.60.0 linking packages using react-native link has become redundant. Autolink has been added to the React-Native CLI which means that iOS will now use cocoapods and Android will use gradle. You can read more about Autolinking here. What is react-native link? react-native link is an automatic way for installing native dependencies. It … Read more
flex vs flexGrow vs flexShrink vs flexBasis in React Native?
Here’s some test code to consider: render() { return <View style={{flex: 1,backgroundColor: “cornflowerblue”}}> <View style={{backgroundColor: “chartreuse”}}><Text>Nothing (17px)</Text></View> <View style={{flex: 0, backgroundColor: “yellow”}}><Text>flex: 0 (17px)</Text></View> <View style={{flex: 0, flexBasis: 10, backgroundColor: “brown”}}><Text>flex: 0, flexBasis: 10 (10px)</Text></View> <View style={{flex: 0, flexGrow: 1, backgroundColor: “orange”}}><Text>flex: 0, flexGrow: 1 (97px)</Text></View> <View style={{flex: 0, flexShrink: 1, backgroundColor: “tan”}}><Text>flex: 0, flexShrink: … Read more
‘react-native’ is not recognized as an internal or external command, operable program or batch file
I had the same issue and tried the following but didnt work Adding npm path to my Environment variables; both system and user Re install npm and react-native-cli Both didn’t work for me, im using Windows 10; Solution that worked for me is to install react-native-cli globally You can install it globally by using the … Read more