// NEEDS
node.js
React https://reactnative.dev/
expo cli vs react native cli
create: npx create-expo-app {appName}
cd {appName}
npm start
expo start
Same internet connection for computer/mobile app.
Scan QR code
To use Android Studio emulator, need to add some paths to environment variables and reboot
- cd Busking
- npm start # you can open iOS, Android, or web from here, or run them directly with the commands below.
- npm run android
- npm run ios # requires an iOS device or macOS for access to an iOS simulator
- npm run web
// < ANDROID STUDIO
EXPO setting Up
component import export
Basic Styling style.create
// < ANDROID STUDIO
https://www.youtube.com/watch?v=ZGIU5aIRi9M&t=744s&ab_channel=FullStackNiraj
Install Android Studio
Create virtual device
Add paths to environment variables
emulator -avd avd_name
Problems with the app, too slow: Go to Android studio and wipe data of the device
adb -s {device_name} reverse tcp:8081 tcp:8081
adb devices -> to see names
// < STARTING WITH APP ESLINT & PRETTIER
https://eslint.org/
add eslint
npm install eslint --save-dev
npm install eslint --init -> should create file eslint*.js
npm install @react-native-community/eslint--save-dev
in file, add new rules: https://eslint.org/docs/latest/rules
PRETTIER
npm install --save-dev --save-exact prettier
create file pretierrc.js in project
add
module.exports = {
bracketSpacing: true,
singleQuote: true,
...
}
insade packacke json
add in scripts_
"lint": "eslint ."
npm run lint
// < APP
Ctrl+M to EXpo Go Menu
// < DEBUGGING
Ctrl + M
React native debugger
Doesn't work
// < CSS
style={{backgroundColor: 'pink'}}
style={styles.wrapper}
const styles = StyleSheet.create({
wrapper: {
flex: 1,
backgroundColor: "#d6d45b",
},
});
Flex?
Absolute (no rem, em...) Density Independent Pixels
https://reactnative.dev/docs/getting-started
flex: 1, full area screen
// < ICONS
react-native-vector-icons: https://icons.expo.fyi/Index
// < ORGANIZATION
1 component per file.
DRY: Don't repeat yourself
// < LISTS
Flatlist: standard list
SectionList: broken into sections
VirtualizedList
// IMAGES
<SafeAreaView style={styles.container}>
<ImageBackground source={require("../../assets/sky.jpg")} resizeMode="cover" style={styles.image}>
<Text>Upcoming weather</Text>
<FlatList data={DATA} renderItem={renderItem} keyExtractor={(item)=> item.dt_txt}
/>
</ImageBackground>
</SafeAreaView>
image
image: {
height: 100,
width: 100,
},
background image
image: {
flex: 1
},
// < PROPS
properties, pass data from parent to child only this direction
inmutable
// NAVIGATION
Ideally one folder for screens
EXpo
https://reactnavigation.org/docs/getting-started
npm install @react-navigation/native
npx expo install react-native-screens react-native-save-area-context
import { NavigationContainer } from "@react-navigation/native";
npm install @react-navigation/bottom-tabs
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
npm
// < DE
// < DE
// < DE
// < DE
// < DE
// < DE
