expo
Scroll through the view when keyboard is open (React Native / Expo)
We are using this <KeyboardAwareScrollView keyboardShouldPersistTaps={‘always’} style={{flex:1}} showsVerticalScrollIndicator={false}> {/* Your code goes here*/} </KeyboardAwareScrollView> and we didn’t face any of the four issues
How to use import with absolute paths with Expo and React Native?
Update: Expo v32.0.0 and up Expo init is creating a babel.config.js for you. Just add the plugins key to your babel.config.js file and add your alias. The env key is not needed anymore. module.exports = function(api) { api.cache(true) return { presets: [‘babel-preset-expo’], plugins: [ [ ‘module-resolver’, { alias: { assets: ‘./assets’, components: ‘./src/components’, modules: ‘./src/modules’, … Read more
Re-render component when navigating the stack with React Navigation
If you are using React Navigation 5.X, just do the following: import { useIsFocused } from ‘@react-navigation/native’ export default function App(){ const isFocused = useIsFocused() useEffect(() => { if(isFocused){ //Update the state you want to be updated } }, [isFocused]) } The useIsFocused hook checks whether a screen is currently focused or not. It returns … Read more
Failed to install expo package with error: yarnpkg exited with non-zero code: 1 yarnpkg exited with non-zero code: 1
This is one way how I solved this issue. I deleted the yarn.lock file & .expo folder and tried running expo upgrade and it worked. I was upgrading from SDK 44 to SDK 45.
How to remove unwanted expo modules
To remove a package from your node_modules directory, on the command line, use the uninstall command. Include the scope of the package is scoped. Unscoped package npm uninstall –save <package_name> Scoped package npm uninstall –save <@scope/package_name> if need to know more about it then follow official Document here https://docs.npmjs.com/uninstalling-packages-and-dependencies#removing-a-local-package-from-the-packagejson-dependencies
Change navigation header background color
This should work: static navigationOptions = () => ({ title: ‘My App’, headerTintColor: Colors.DarkBlue, headerStyle: { backgroundColor: ‘red’ }, headerLeft: <HeaderBarItem to=’InfoScreen’ title=”App info” />, headerRight: <HeaderBarItem to=’FeedbackScreen’ title=”Feedback” /> });