I’m not sure why no one has pointed out this solution so far. Use React Native Debugger – https://github.com/jhen0409/react-native-debugger! It is the best debugging tool for React Native in my opinion and it gives Network Inspection out of the box. Take a look at these screenshots. Right click and select ‘Enable Network Inspect’ Right click … Read more
According to React Native Documentation, you can hide warning messages by setting disableYellowBox to true like this: console.disableYellowBox = true; Update: React Native 0.63+ console.disableYellowBox is removed and now you can use: import { LogBox } from ‘react-native’; LogBox.ignoreLogs([‘Warning: …’]); // Ignore log notification by message LogBox.ignoreAllLogs();//Ignore all log notifications to ignore all log notifications
Two different options to add item to an array without mutation case ADD_ITEM : return { …state, arr: […state.arr, action.newItem] } OR case ADD_ITEM : return { …state, arr: state.arr.concat(action.newItem) }
Something like this: <Text style={{color: ‘blue’}} onPress={() => Linking.openURL(‘http://google.com’)}> Google </Text> using the Linking module that’s bundled with React Native. import { Linking } from ‘react-native’;
Thanks @rmaddy, I added this just after other key-string pairs in Info.plist and fixed the problem: <key>NSPhotoLibraryUsageDescription</key> <string>Photo Library Access Warning</string> Edit: I also ended up having similar problems on different components of my app. Ended up adding all these keys so far (after updating to Xcode8/iOS10): <key>NSPhotoLibraryUsageDescription</key> <string>This app requires access to the photo … Read more
Let’s start by pointing out the differences and determining how it could cause troubles. Here is the code of async and “sync” componentDidMount() life-cycle method: // This is typescript code componentDidMount(): void { /* do something */ } async componentDidMount(): Promise<void> { /* do something */ /* You can use “await” here */ } By … Read more
In your render function: { this.state.showTheThing && <TextInput/> } Then just do: this.setState({showTheThing: true}) // to show it this.setState({showTheThing: false}) // to hide it
After adding right path to the PATH variable issue is resolved. Below are the steps to find the right path. 1. Enter: npm install -g react-native-cli output: /usr/local/Cellar/node/6.1.0/libexec/npm/bin/react-native ->/usr/local/Cellar/node/6.1.0/libexec/npm/lib/node_modules/react-native-cli/index.js/usr/local/Cellar/node/6.1.0/libexec/npm/lib └── react-native-cli@0.2.0 from above output you can clearly see the path: /usr/local/Cellar/node/6.1.0/libexec/npm/bin/react-native export PATH=”/usr/local/Cellar/node/6.1.0/libexec/npm/bin:$PATH” react-native init appName cd appName react-native run-ios if you getting xcrun: error: … Read more
Example fetch with authorization header: fetch(‘URL_GOES_HERE’, { method: ‘post’, headers: new Headers({ ‘Authorization’: ‘Basic ‘+btoa(‘username:password’), ‘Content-Type’: ‘application/x-www-form-urlencoded’ }), body: ‘A=1&B=2’ });
TouchableOpacity extends TouchableWithoutFeedback, so you can just use the disabled property : <TouchableOpacity disabled={true}> <Text>I’m disabled</Text> </TouchableOpacity> React Native TouchableWithoutFeedback #disabled documentation The new Pressable API has a disabled option too : <Pressable disable={true}> {({ pressed }) => ( <Text>I’m disabled</Text> )} </Pressable>