I finished this course as a part of react specialization in Coursera
You can download the apk version of this application here
In the project directory, you can run:
This will run the application in the development mode but make sure you have installed any andriod simulator or expo client to view the application. Another important script you need to run is the json-server in the json-server directory. Unless your application didn't get their assets.
- solve
- additionally need
yarn add react-native-community/react-native-safe-area-view
react-native docs said To finalize installation of react-native-gesture-handler, add the following at the top (make sure it's at the top and there's nothing else before it) of your entry file, such as index.js or App.js:
Problem with Stack Navigator: solve
Problem with gesture: solve
Breaking Changes with NetInfo: solve
| Issue | Solution |
|---|---|
| Regular expression error due to node Version found at node_modules/metro_config/defaults/blacklist.js here | Please note that if you run a npm install or a yarn you need to change the code again.OR You can downgrade your node version. |
| After the installation of react-navigation, we need to install some more dependencies. here | expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context |
| createStackNavigator() is offered by a different module here | yarn add react-navigation-stack @react-native-community/masked-view |
| Need to wrap MainNavigator inside of createAppContainer here | Use the createAppContainer on your Main navigator and use the resulting variable(component) inside your Main component. here |
| Title gets truncated on some devices due to native fonts. here | Set to something like Roboto for Andrdoid and Arial for iOS |
| Need to separately install createDrawerNavigator(): here | yarn add react-navigation-drawer |
| Possible BUG in the Expo android application | The menu component will be a blank white screen after navigating to it from the drawer navigator. To solve this, use the default ‘home’ button on the android device and go back into the expo application. It works thereafter. Must repeat step for every component in the drawer Navigator and every time you restart the app. |
| Issue | Solution |
|---|---|
| Use Arrow function to provide ‘headerLeft’ attribute instead of a plain component | headerLeft: () => <Icon name=”menu” size={24}></Icon> |
| Use iconStyle attribute to move the icon away from the edge. (Icon is too close to device edge) | Add another attribute as iconStyle={{marginLeft: 10}} |
| DrawerItems needs to be imported from a different module | Import from react-navigation-drawer |
Json-server command change json-server --watch db.json -p 3001 -H <YOUR IP ADDRESS> |
json-server command change json-server --watch db.json -p 3001 -H <YOUR IP ADDRESS> |
| Issue | Solution |
|---|---|
| react-native-swipeout | this is no longer supported, please consider using it instead. (Optional) |
| Persist Store | import { AsyncStorage } from 'react-native';const config = {key: 'root', debug: true,storage: AsyncStorage}; here |
| Login Component | expo install expo-secure-store import * as SecureStore from 'expo-secure-store' use prop inputContainerStyle instead of containerStyle |
| Mail composer has moved to different module | expo install expo-mail-composer import * as MailComposer from 'expo-mail-composer'; |
| Permission has moved out of expo. Notification for android require a separate object to create for sound and vibration to work | expo install expo-permissions import * as Permissions from 'expo-permissions'; Notifications.createChannelAndroidAsync('Confusion', {name: 'Confusion',sound: true,vibrate: true}) here |
| Mail composer has moved to different module | expo install expo-mail-composer import * as MailComposer from 'expo-mail-composer'; |
| Image picker has moved to different module expo install expo-image-picker | import * as ImagePicker from ‘expo-image-picker here |
| createBottomTabNavigator has moved | yarn add react-navigation-tabs import { createBottomTabNavigator } from 'react-navigation-tabs'; |
| NetInfo API has changed.Expo not compatible with latest NetInfo Module | expo install @react-native-community/netinfo (Use 4.x.x) import NetInfo from '@react-native-community/netinfo'; const unsubscribe = NetInfo.addEventListener(state => {console.log('Connection type', state.type);console.log('Is connected?', state.isConnected);}); |
| Expo calendar API needs separate install | expo install expo-calendar import * as Calendar from 'expo-calendar'; |
| Calendar.DEFAULT is deprecated | Need to use getCalendarsAsync() and manually find the default calender. Default Calender has the allowsModifications flag set to TRUE. |
If you find any problem and tried enough although didn't solve those issues then let me know it.
👉 mail me at mdemon7475@gmail.com 👉 put a message at twitter.com/emonhossain_dev