Brain App Project Plan

 1st Phase of App development

1. Setup the Project

2. Setup the directory structure of the project.

Make sure screens, components, api-services, styles, common-styles must be separate and well organized.

assets folder structure

assets/images // all images of the application

assets/fonts // fonts using in the applicaton

src folder structure

Reuseable components

src/components // reusables components need to be use in any component

Authentication components

src/screens/auth/login.js

src/screens/auth/register.js

src/screens/auth/reset_password.js

src/screens/auth/verify_password.js

src/screens/components/ // auth component specific components

Dashboard components

src/screens/dashboard/dashboard.js // show customer balance components

src/screens/dashboard/components/customer_balance.js

Package plans components

Package categories

src/screens/package_catgories/categories.js

Package plans

src/screens/package_plans/plans.js

src/screens/package_plans/components/plan_details.js

Subscriptions

src/screens/subscriptions/subcription.js

Payment method

src/screens/payments/payment.js // payment form + package details

src/screens/payment/components/jazzcash.js

Billing history

src/screens/billing_history/billing.js // build filter at top 

src/screens/billinng_history/components/single_bill_item.js

Change Wifi password

src/screens/wifi_password/password.js

Setup NativeWind in you project

To install tailwind css in your project you need to follow following steps.

1. we need to install 'nativewind' package.

- npm i nativewind

2. Than we need to install tailwind -dev dependencies

- npm i --dev tailwindcss

3. To setup tailwind css in your project, you need to have config file

run command to create default config file

- npx tailwindcss init

tailwind.config.js file will be created, Open it and set configuration.

You need to set path of your file that will use tailwind css to style.

open the file and add this line of code

content: ["./App.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"],

here src is my folder that will contain my screens and components.

4. Add the Bebal Plugin.

Add this line under return array

plugins: ["nativewind/babel"],

Setup React Native Navigation

To implement navigation visit the official documentation.

https://reactnavigation.org/

1. Install the navigation package in your project

-npm install @react-navigation/native

On thing to understand is react navigation is made up of core utilities of the react native and it is structure in your project with the use/help of navigator. 

What is navigator?

This is the type of navigation you want to use in your project. for example: Stack, Native Stack, Bottom Tab, Drawer etc.

2. After that install the dev dependencies

-npm install react-native-screens react-native-safe-area-context

3. Now we need to decide which navigator we want to use in our application to navigate between screens.

Implement Native Stack Navigator

-npm install @react-navigation/native-stack

Example code to setup navigation in project

import React from 'react';

// Navigation Container

import { NavigationContainer } from "@react-navigation/native";

// Navigator

import { createNativeStackNavigator } from "@react-navigation/native-stack";

// Screens

import Home from '../screens/Home';

import Details from '../screens/Details';

import Splash from '../screens/stater/Splash';

const Stack = createNativeStackNavigator();

const Navigations = () => {

    return (

        <NavigationContainer>

            <Stack.Navigator initialRouteName='Splash'>

                <Stack.Screen name='Splash' component={Splash}

                options={{

                    headerShown: false

                }}

                />

                <Stack.Screen name='Home' component={Home}

                options={{

                    title: "brain Net"

                }}

                />

                <Stack.Screen name='Details' component={Details}

                options={{

                    title: 'Brain Details'

                }}

                />

            </Stack.Navigator>

        </NavigationContainer>

     );

  }

   

  export default Navigations;

Import the above file in App.js.

Implement Splash Screen and never go to previous screen.

We will build splash screen that will be displayed for 5 seconds, after that you will be navigate to home or login screen

Example code

import React from 'react';

import { View, Text, StyleSheet } from 'react-native';

import { useNavigation } from "@react-navigation/native";

// safe area view

import { SafeAreaView } from "react-native-safe-area-context";

//import primary colors

import Colors from './../../components/common/Colors';

// import svgs

import BrainNetFiberLogo from '../../Assets/SVG/BrainNetFiberLogo';

import BrainWhiteLogo from '../../Assets/SVG/BrainWhiteLogo';

const Splash = () => {

    // Navigate to home screen

    const { replace } = useNavigation();

    setTimeout(() => {

        // navigation

        // replace remove the last screen from stack and place the new on click back you never visit the previouse screen;

        replace('Wellcome')

    }, 3000)

    return (

        <SafeAreaView style={styles.layout}>

            <View style={[styles.Container, styles.BgBrainBlueColor]}>

                <BrainNetFiberLogo />

                <View style={styles.PowerContainer}>

                    <Text  style={[styles.TextBrainRedColor, styles.PowerBy]}>Powered By</Text>

                    <BrainWhiteLogo style={styles.BrainLogo} />

                </View>

            </View>

        </SafeAreaView>

     );

}

const styles = StyleSheet.create({

    layout : {

        flex: 1

    },

    Container : {

        flex: 1,

        justifyContent: 'center',

        alignItems: 'center'

    },

    BgBrainBlueColor : {

        backgroundColor: Colors.brain_blue_color

    },

    TextBrainRedColor: {

        color: Colors.brain_red_color

    },

    PowerContainer: {

        minWidth: 212,

        flexDirection: 'row',

        justifyContent: 'flex-end',

        paddingTop: 8,

    },

    PowerBy: {

        fontSize: 16,

        fontWeight: 'bold',

        color: 'white',

        marginEnd: 10

    },

    brainLogo: {

        //

    }

});

 

export default Splash;

But i need to use SVG to display logo in middle of the screen.

for that i need to install react-native-svg package

-npm install react-native-svg

Convert your SVG into react native support component.

After that go to SVGR playground website, where drop svg and built react-native support component.

Link: https://react-svgr.com/playground/?native=true

Set Image in Screen

I go to splash website and download iphone 14 pro image which i want to reduce in size.

Some random website to resize image, you could also find more website as well.

Resize Image Link: https://www.resizepixel.com/reduce-image-in-kb/

Install vector icons

Go to npm site to install vector icon package using npm package.

source link: https://www.npmjs.com/package/react-native-vector-icons

Command: npm i react-native-vector-icons

To setup vector icons in android, do this configuration

Edit android/app/build.gradle (NOT android/build.gradle) and add:

apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")

How to use icon in component ?

// import icons

import Icon from 'react-native-vector-icons/Ionicons';

{/* icon */}

<Icon name="chevron-down" size={40} color="black" />

Source Link: https://www.youtube.com/watch?v=TsVwnEXbqRM

Four (4) digit otp setup

Reference video link: https://www.youtube.com/watch?v=MwAk6TO6LrY

Setup Password input field with eye icon

const [password, setPassword] = useState('');

const [hidePassword, setHidePassword] = useState(true);

const togglePasswordVisibility = () => {

    setHidePassword(!hidePassword);

  };

{/* password */}

    <View style={styles.container}>

    <Icon name="arrow-forward" size={24}  tyle={styles.icon}  />

      <TextInput

        style={styles.input}

        placeholder="Enter password"

        value={password}

        onChangeText={(text)=>setPassword(text)}

        secureTextEntry={hidePassword}

      />

     

        <TouchableOpacity onPress={togglePasswordVisibility} style={styles.eyeIcon}>

          {/* <Feather name={hidePassword ? 'eye-off' : 'eye'} size={24} color="gray" /> */}

          <Icon name={hidePassword ? 'eye' : 'eye-off'} size={24}  color="gray"  />

        </TouchableOpacity>

     

    </View>

const styles = StyleSheet.create({

  container: {

    backgroundColor: 'white',

    borderRadius: 10,

    flexDirection: 'row',

    alignItems: 'center',

    paddingHorizontal: 10,

    marginVertical: 10,

  },

  input: {

    flex: 1,

    paddingVertical: 10,

  },

  icon: {

    marginRight: 10,

  },

  eyeIcon: {

    marginLeft: 10,

  },

});

Date picker library using this this project

Link: https://github.com/pohsiu/react-native-date-ranges

Video Link: https://www.youtube.com/watch?v=Kqat18qmTno

For project i'm using font size for different elements like so

// button bold

// heading semibold

// para regular

// input label semibold

// link semibold

ProgressBar Package im using this s project in Dashboard screen

PackageLink: https://www.npmjs.com/package/react-native-progress-bar-horizontal

Disable yellow box warning in your react native project

• React Native displays yellow box warnings in the development environment. These warnings often provide useful information, but sometimes they can be excessive.
• To disable all yellow box warnings completely, you can use the following snippet in your code (usually in your app’s entry point, such as index.js)

import { LogBox } from 'react-native';
LogBox.ignoreAllLogs();

How to make build APK file of the react native application.

 Visit the official documentation of react native and get guide to make first release of the application

url: https://reactnative.dev/docs/signed-apk-android

Android required all application to be digitally signed with certificate before it installed. In order to distribute your application via Google Play Store, the application must signed with key release.

The app signing is use to tract future release/updates in your application.

Since 2017,  the application signing is automatically manage by App Signing by Google Store.

1. To generate the app key release certificate you have to go to your jdk/bin directory and run the following command with administration rights.

 keytool -genkeypair -v -storetype PKCS12 -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 

This command will ask few questions, before create release.

You will find file name with my-upload-key.keystore.

 2. Setting up Gradle variables.

Go to android/app/gradle.properties file and place these variables in this file.

MYAPP_UPLOAD_STORE_FILE=my-upload-key.keystore

MYAPP_UPLOAD_KEY_ALIAS=my-key-alias

MYAPP_UPLOAD_STORE_PASSWORD=*****

MYAPP_UPLOAD_KEY_PASSWORD=*****

replace the *** with your password you have mentioned by creating key release.

3. Now add signing release configuration in app build.gradle config file. This configuration is use to setup release builds to be signed using the upload key.

under signingConfigs {

release {

            if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {

                storeFile file(MYAPP_UPLOAD_STORE_FILE)

                storePassword MYAPP_UPLOAD_STORE_PASSWORD

                keyAlias MYAPP_UPLOAD_KEY_ALIAS

                keyPassword MYAPP_UPLOAD_KEY_PASSWORD

            }

        }

}

Next under buildTypes.release key you need to change entry like this.

// signingConfig signingConfigs.debug

signingConfig signingConfigs.release

4 Now go to android directory

cd android

run the command

-- ./gradlew clean

This command will clean if any previous build/release files exist.

5 Command that will create local apk file.

-- ./gradlew assembleRelease

Source Link: https://www.youtube.com/watch?v=2yHI0e4MzUE&t=2s