There are two tools that you need to develop apps with Expo: a command line app called Expo CLI to initialize and serve your project and a mobile client app called Expo Go to open it on iOS and Android. Any web browser will work for opening the project on the web.
You don't need macOS to build an iOS app with Expo, you only need an iOS device to run the Expo Go app. For your development machine, Windows, Linux, and macOS are all supported.
Copy npm install --global expo-cli
Configuring a splash screen and app icon
Copy import {Dimensions} from 'react-native';
import {appColorsType, fontSizeType, configType} from '../redux/types/types';
const WIDTH = Dimensions.get('window').width;
const HEIGHT = Dimensions.get('window').height;
const HEADER_ANDROID_HEIGHT = Dimensions.get('window').height * 0.07;
const HEADER_IOS_HEIGHT = Dimensions.get('window').height * 0.097;
////
const { width, height } = Dimensions.get('window');
//Guideline sizes are based on standard ~5" screen mobile device
const guidelineBaseWidth = 350;
const guidelineBaseHeight = 680;
const scale = (size: number) => width / guidelineBaseWidth * size;
const verticalScale = (size: number) => height / guidelineBaseHeight * size;
const moderateScale = (size: number, factor = 0.5) => size + ( scale(size) - size ) * factor;
////////////////////////////////////
const config: configType = {
isDarkMode: false,
borderRadius: 10,
cardStyle: 1,
homeStyle: 1
};
const appFontSize: fontSizeType = {
smallSize: moderateScale(11),
mediumSize: moderateScale(13),
largeSize: moderateScale(15),
fontFamily: 'arial',
};
const lightTheme: appColorsType = {
StatusBarColor: '#F4F4F4',
barStyle:'dark-content', // dark-content, default
primaryDark: '#953e22',
primary: '#d65a31',
primaryLight: '#de7b5a',
secondry: '#959595',
primaryBackgroundColor: '#F4F4F4', //2b2024
secondryBackgroundColor: '#E8E8E8', //full black
backgroundImageColor: '#dcdcdc',
textColor: '#000000',
secondryTextColor: '#ffffff',
primaryTextColor: '#ffffff',
appFontSize: appFontSize,
};
const darkTheme: appColorsType = {
StatusBarColor: '#282828',
barStyle: 'light-content', // dark-content, default
primaryDark: '#953e22',
primary: '#d65a31',
primaryLight: '#de7b5a',
secondry: '#878787',
primaryBackgroundColor: '#282828', //
secondryBackgroundColor: '#141414', // white
backgroundImageColor: '#dcdcdc',
textColor: '#ffffff',
primaryTextColor: '#ffffff',
secondryTextColor: '#000000',
appFontSize: appFontSize,
};
export {
lightTheme,
darkTheme,
appFontSize,
config,
WIDTH,
HEIGHT,
HEADER_IOS_HEIGHT,
HEADER_ANDROID_HEIGHT,
};
Copy {
"name": "expobabaapp",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"@react-native-async-storage/async-storage": "~1.15.0",
"@react-native-community/slider": "4.1.7",
"@react-navigation/bottom-tabs": "^6.0.9",
"@react-navigation/drawer": "^6.1.8",
"@react-navigation/native": "^6.0.6",
"@react-navigation/stack": "^6.0.11",
"@types/react-redux": "^7.1.20",
"@unimodules/core": "~7.2.0",
"@unimodules/react-native-adapter": "~6.5.0",
"expo": "~43.0.2",
"expo-linear-gradient": "~10.0.3",
"expo-status-bar": "~1.1.0",
"fiction-expo-restart": "^1.1.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-app-intro-slider": "^4.0.4",
"react-native-gesture-handler": "~1.10.2",
"react-native-image-zoom-viewer": "^3.0.1",
"react-native-reanimated": "~2.2.0",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.8.0",
"react-native-web": "0.17.1",
"react-redux": "^7.2.6",
"redux": "^4.1.2",
"redux-persist": "^6.0.0"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@types/react": "~17.0.21",
"@types/react-native": "~0.64.12",
"typescript": "~4.3.5"
},
"private": true
}