Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
NotificationsYou must be signed in to change notification settings

React-Native-Repositories/React-Native-Basic-UI

Repository files navigation

Demo App URL ( May not be up-to-date, Follow the below steps and run it in your local )

https://i.diawi.com/w87ZVp

Features:

✅ Splash Screen Image Upon Starting of Application

✅ Folder Architecture

✅ Stack, Tab and Drawer Navigation

✅ Stack Navigation Screens in Drawer Navigation ( Eg: Settings Tab)

✅ Font and Size(height & width) Responsive Design for all mobile screens

✅ Light and Dark Mode

✅ SVG Images Rendering

✅ Custom Bottom Tab Bar

✅ Language Translation

✅ Fixed Sub Tabs

✅ Dynamic Sub Tabs

✅ Added More Helpers ( Share, Call, Download etc)

➿ Custom Dropdowns ( Coming soon... )

➿ FAQ Collapse View ( Coming soon... )

➿ Animations ( Coming soon... )

➿ More features will be added soon...

Step 1

npx react-native init CareerWill

Step 2

npm i --save @react-native-masked-view/masked-view @react-navigation/native @react-navigation/stack  metro-config react-native-gesture-handler react-native-safe-area react-native-safe-area-context react-native-screens react-native-svg react-native-svg-transformer react-native-vector-icons react-native-iphone-x-helper  @react-native-async-storage/async-storage react-native-reanimated

To support status bar in IOS devices use below NPM

npm i rn-status-bar --save

For Fixed Top Tab bar

npm i --save react-native-pager-view @react-navigation/material-top-tabs

Home -> Fixed Tabs -> Select Fixed Tabs

For Language Translation

npm i --save i18next react-i18next react-native-localize

Langauge -> Choose Language

Step 3

Copy assets/fonts from root

Add below lines in babel.config.js

  plugins: [    'react-native-reanimated/plugin',  ],

to support SVG icons replace metro.config.js file with below

const { getDefaultConfig } = require('metro-config');module.exports = (async () => { const {   resolver: { sourceExts, assetExts }, } = await getDefaultConfig(); return {   transformer: {     babelTransformerPath: require.resolve('react-native-svg-transformer'),     getTransformOptions: async () => ({       transform: {         experimentalImportSupport: false,         inlineRequires: false,       },     }),   },   resolver: {     assetExts: assetExts.filter(ext => ext !== 'svg'),     sourceExts: [...sourceExts, 'svg'],   }, };})();module.exports = { transformer: {   getTransformOptions: async () => ({     transform: {       experimentalImportSupport: false,       inlineRequires: true,     },   }), },};

For Fonts add react-native.config.js in root and copy below

module.exports = {  project: {    ios: {},    android: {},  },  assets: ['./assets/fonts/'],};

and add

npx react-native-asset

to add fonts to android/IOS

Step 4

npx react-native assest ( it will update fonts to android/ios )

cd/ios - pod install

Step 5

npm run-android

npm run ios

Use Below to Covert SVG images to JS files

https://transform.tools/svg-to-react-native

For Splash Screen

  • Convert your icons in to different sizes usinghttps://www.appicon.co/
  • replace this images withandroid/app/src/main/res images ( Folder name starts withmipmap )
  • Update Your App Name inandroid/app/src/main/res/values/string.xml
  • Create color.xml file underandroid/app/src/main/res/values and paste below
<?xml version="1.0" encoding="utf-8"?><resources>    <!--   color for the app bar and other primary UI elements -->    <color name="colorPrimary">#FFFFFF</color>    <color name="colorPrimaryDark">#A52D53</color>    <color name="splashscreen_background">#FFFFFF</color>    <color name="colorAccent">#FFFFFF</color></resources>
  • Create background_splash.xml file underandroid/app/src/main/res/drawable and paste below
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">    <item android:drawable="@color/colorPrimary"/>    <item>        <bitmap            android:gravity="center"            android:src="@mipmap/ic_launcher"/>    </item></layer-list>
  • Create splashscreen.xml file underandroid/app/src/main/res/drawable and paste below
<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android">    <item android:drawable="@color/splashscreen_background"/>    <item>        <bitmap            android:gravity = "center"            android:src="@mipmap/ic_launcher"/>    </item></layer-list>
  • Import above inandroid/app/src/main/AndroidManifest.xml in activity
<activity...android:theme="@style/SplashTheme">
  • Add Below inandroid/app/src/main/res/values/styles.xml under resourses
<resources>... <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">        <!-- Customize your theme here. -->    <item name="android:windowBackground">@drawable/splashscreen</item>            <item name="android:windowDisablePreview">true</item>    </style></resources>

Light Mode

Dark Mode

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published
[8]ページ先頭
©2009-2025 Movatter.jp