ReactNative - Imtiaz211/interviews GitHub Wiki
React Native Components.
- Basic Components
- View
- Text
- Image
- TextInput
- ScrollView
- StyleSheet
- User Interface
- Button
- Switch
- List View
- Flatlist
- SectionList
- Android Component and APIs
- BackHandler
- DrawerLayoutAndroid.
- PermissionAndroid.
- ToastAndroid.
- iOS Component and APIs
- ActionSheetIOS
- Others
- ActivityIndicator.
- Alert
- Animated.
- Dimentions.
- KeyboardAvoidingView
- Linking
- Modal
- PixelRation.
- RefreshControl
- StatusBar
Concepts:
- Components
- JSX
- Virtual DOM
- Props
- State
Features
- Cross-Platform Development.
- Native Performance.
- Hot Reloading.
- Access Native Features.
Declarative Style
- Large Community
- Code Resuability.
- Flexbox layout:- A component can specify the layout of its children using the Flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes.
- Third Party Support Liberary.
- Testing and Debuging.
Virtual DOM
- A lightweight representation of the actual DOM in memory. React Native uses it to efficiently update the UI by comparing the virtual DOM with the real DOM and only updating t## he necessary parts.
- Introduction
- React Native
- why React Native
- React Native Alternative.
flatlist, selectionList, scrollview we can use to display large data on screen.
Saga and navigation
- Saga only can be used in redux, it won't be use only saga.
- Install saga :-npm install redux-saga
- redux use async data, it wont work without saga,
- saga resolve redux side effect.
- API call, promise handle should be in saga.
- Generator and iterator uses (*) infront of funtion
- API call in saga Function
- Get saga Data.
- send saga data to reduce
- fetch data in component
-
yield
is somewhat similar toawait
Action and Reducer need to be sync with the help of constant file.
- action function how to create, action is event, Redux is very important.
- Dispatch through Redux for button action. useDispatch is hook.
- Provider is required for Redux
- Constant need to import in reducer
- combineReduce that can combine all reduce in rootReduce.
- Redux wraper, do more in index.js, register app, register provider, register store.
- ...state, this is
ecmas
spread operator, in react native - useSelector form 'react-reduce' that will fetch all data from store.
We can use Image in React Native
- source, url and do much more for images.
Redux & Saga flow
- passing data between components is very difficut, we can pass by props, that is another things.
- Redux is a state management library that is widely used in React applications
- Promise in javascript and swift as well
- npm i redux, npm i react-redux, npm i @reduxjs/toolki these three need to install for redux.
Element Inspector
- (ctrl + m) for inspector, in windows system on emulator
- we can inspect all styles, view and all stuff.
async storage:- it is lika a local storage,
- it can remove by removing app, through button action, setting remove cache, or delete appp.
- it can be assess in side app.
- Install :- npm install @react-native-async-storage/async-storage
- Pod not installed on my System
Change APP icon
- Download you image and replace with same name and size. as i learned for Android only.
- iOS app same as Android need to replace the app ios in xcasset folder.
What is ref:- ref is component property, it is also called DOM, it is also called hook, with the help of
ref
can be done more and more but first approach isstate
Serch box in Rn Learned get, delete in JSON Server
- How to specity type of variable/constant in React Native?
- Convert data in different form like string to Int, int to bool
JSON server
server install, npm install -g json-server
- Start JSON Server :- json-server --watch db.json
- JSON server can be tested on Postman
- Learn API creation with GET, POST,DELETE, PUT with the help of JSON-server, and saved in pOSTman collection.
- Check JSON server with IP Address.
fetch
is default method in react native to call API, this is async process
- Flatlist have inbuilt scroll feature, so no need to add scrollview.
Passing data between screens
- We can pass data in different ways between screen, kindly see code in Repository.
- While working on Tab navigation, usually we get error, so kindly run this command:- npm start --clean-cache
- When ever you add any package from NPM always generate new build.
- Tab Navigation packgage install NPM
- npm install @react-navigation/material-top-tabs react-native-tab-view
- npm install react-native-pager-view
- Tabbar Bottom and Tabbar Top are very efficent and dynamic, that we need only to install package NPM from
reactOrganization
Object only accessiable with (:) like option:{{title:"title"}}/
- Single screen navigation bar can be controller with <Stack.Screen options> but if you want to controll all screen then you need to change in <Stack.Navigator screenOption/>
- On Navigation Bar anything you can place like
button
,text
,textinpu
and much more. - even we can put our custom components.
Navigation first need to install NPM below all need to install.
- npm install @react-navigation/native
- npm install react-native-screens react-native-safe-area-context
- npm install @react-navigation/native-stack
Pressable like Button:-
- Four types, onPress, onPressIn, onPressOut,OnLongPress
Modal is like a alertViewController, it cover full screen, we need to costomise and do operations.
- visibility:- true or false
- animationType :- fade, none and slid
- transparent:- true or false
- above are property of Modal
React Native Button doesn't have more style.
- TouchableHighlight and TouchableOpacity can be used like Button
- Radio Button :- TouchableOpacity
Responsive UI with Flex
Hooks
- all activity can be done with the help of hooks, that will work in functional components
-
useState
hereuse
is Hooks, that is only works on functional components not on class components. - Hooks available in 16.8 version
- Where can be used Hooks
- State, Life Cycle of Method, Content API, Ref and Memo, Much more, We can make custom Hooks also.
- useEffect :- This will called every stateUpdate, to restrict this useEffect hook,pass [] array.
- ComponentDidUpdate = [count]:- only for class components,
- componentDidMount = []
- normal useEffect, not work on unmount.
Life Cycle methods
- life cycle phas
- Mounting
- Update
- Unmounting
Class inherite from component and it most use
render
to for component then it return.
- Const and let cann't be used in side class.
-
this
can be used in side the class - function component can be used but class component is very useful and recommendeed.
- If you want state inside class, need constructor with super() function, this has also state variable.
-
setState
is default function inclass
.
SectionList/Data it means
array of array
we can use section default feature in the component.
Dynamic Grid
- Flex can acquire all available spaces
- FlexDirection can set direction for Grid
- FlexWarp can wrap text/grid in next line
FlatList
for list tableview to show list.
- Map Function, flat list we can add header, footer , manage very efficient, but map function cann't do it smooth.
- FlatList we can use lazy loadig,
Button doesn't have style, secureText, ternery operator like {display ? : null}
- View
- Text
- StyleSheet
- useState
- InputText
- FlatList
- Modal
- Map
- TouchableHighlight
- TouchableOpaque
- Radio Button
- Status Bar
- Platform OS Check
- Webview
- Navigation Stack, data passing
- Tabbar
- Static and Dynamic model
- useEffect for API call, and cleanup task, stateupdate etc can be performed.
style = styleSheet.create ({}) this will create
internal style
this is called inline Stype. {{double object}}
Parent to child data pass, child to parent data pass is possible in React Native. Lifting up state.
- We can't send state to another component .
Props = Properties, in react Native.
- Props are argument, parameter of the components to pass in between,
State Data cann't be share to other components.
useState
this is called hook in react native, where ever you find use..., that is called hook.
- Functional
- Class based
When you update a variable
component
not rerender.
you cannot use state out side of component.
When you update a
state
component rerender.
Comment in React native is {/**/} js file replace with tsx in latest version that 0.74
- first Install
- Chocoloty
- choco install -y nodejs-lts microsoft-openjdk17
- Commands, java -version
,
node -v` - Install SDK Components
- Set Enviroment variable
- Install NPM
- Install react-native @0.74.3
- npx react-native run-android