Developer Anchubby

This writing provides an overview of React Native Navigation.  1. Navigation Patterns Navigation patterns such as tab, stack, drawer navigation are as below example. Mostly tab navigation is used (ex. Instagram, Facebook) and sometimes they are used mixed. For detail of how to use, refer to:  https://reactnavigation.org/ There are more variants of the tab navigator, like  Google’s Material Design (top) Tabs 2. NavigationContainer Component In the React Navigation library, components need to be wrapped in a NavigationContainer component to manage the navigation structure and ensure navigators work properly. import { NavigationContainer } from '@react-navigation/native' ; 3. Stack Navigation For how to use, refer to comments in below example: import React from 'react' ; import { StyleSheet, Text, View } from 'react-native' ; import { NavigationContainer } from '@react-navigation/native' ; // import this library to use navi...

This writing provides an overview of React Native StyleSheet and styling.  1. StyleSheet The StyleSheet  in React Native abstracts CSS styling by using JavaScript objects to define styles. Example with Inline Styling: import React from 'react' ; import { View } from 'react-native' ; const AwesomeBox = () => ( < View style = {{ width : 100 , height : 100 , backgroundColor : 'red' }} /> ); Example using StyleSheet: import React from 'react' ; import { StyleSheet, View } from 'react-native' ; const AwesomeBox = () => ( < View style = {styles.box} /> ); const styles = StyleSheet.create({ box : { width : 100 , height : 100 , backgroundColor : 'red' }, });   2. Dynamic Styling Dynamic styling allows the style of a component to change based on state or props. Example with Dynamic Styling: Red box becomes blue when being pressed. import Reac...

This writing provides an overview of React Native introduction and Core Components. 1. React Native Overview React Native is a framework similar to React, used for building native mobile applications. It allows developers to write applications in JavaScript and render them using native components for platforms like Android and iOS, enabling cross-platform development with a single codebase. 2. Expo and React Native Expo is a platform that simplifies the development of React Native apps. It includes tools like Expo Go, an app for viewing the development progress on a phone, and Expo CLI, which aids in app creation, management, and development. 3. Native Rendering React Native achieves native rendering by mapping React components to their native counterparts, ensuring efficient performance and integration with platform-specific features. (Here native means Swift for iOS, Java, Kotlin etc for Android)  4. Pros and Cons of React Native Advantages: Cross-platform compatibility reduces d...

This writing provides an overview and introduction of React Hook. 1. What is a Hook? Hooks allow function components to access React state and lifecycle features. Rules for using hooks: Only call hooks at the top level of your component. Only call hooks within React function components or custom hooks. import React, { useState, useEffect } from 'react' ; function TitleCount() { const [count, setCount] = useState( 0 ); useEffect(() => { document . title = ` You clicked ${count} times ` ; }, [count]); return < button onClick = {(prev) => setCount(prev + 1 )} >+</ button > ; } 2. useState() Hook The useState hook allows adding state to function components. It should be called at the top level of a component to manage its state. When useState is called, it returns an array with two values: currentState : The current state value. stateSetter : A function to update the state. initialState : Initial value. true, fa...