import React from 'react'; import {View, Text, ActivityIndicator, StyleSheet} from 'react-native'; import {COLORS} from '../styles/colors'; const ProgressView = props => { return ( Unlocking Please Wait ); }; const styles = StyleSheet.create({ container: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0, 0, 0, 0.2)', }, card: { alignItems: 'center', paddingHorizontal: 40, paddingVertical: 20, borderRadius: 10, gap: 8, backgroundColor: COLORS.white, elevation: 5, shadowColor: '#000', shadowOffset: {width: 0, height: 2}, shadowOpacity: 0.25, shadowRadius: 3.84, }, indicator: { alignSelf: 'center', }, text: { fontSize: 16, marginTop: 8, color: COLORS.text_color, textAlign: 'center', }, }); export default ProgressView; export const COLORS = { white: '#FFFFFF', text_color: '#333333', activity_indicator_color: '#007AFF', // Example color, can be changed }; import React from 'react'; import { SafeAreaView, StyleSheet, View } from 'react-native'; import ProgressView from './src/components/ProgressView'; const App = () => { return ( {/* Your other components will go here */} ); }; const styles = StyleSheet.create({ container: { flex: 1, }, content: { flex: 1, justifyContent: 'center', alignItems: 'center', }, }); export default App; { "name": "progress-view-app", "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" }, "dependencies": { "expo": "~48.0.18", "expo-status-bar": "~1.4.4", "react": "18.2.0", "react-native": "0.71.8" }, "devDependencies": { "@babel/core": "^7.20.0" }, "private": true } module.exports = function(api) { api.cache(true); return { presets: ['babel-preset-expo'], }; }; { "expo": { "name": "ProgressView App", "slug": "progress-view-app", "version": "1.0.0", "orientation": "portrait", "icon": "./assets/icon.png", "userInterfaceStyle": "light", "splash": { "image": "./assets/splash.png", "resizeMode": "contain", "backgroundColor": "#ffffff" }, "assetBundlePatterns": [ "**/*" ], "ios": { "supportsTablet": true }, "android": { "adaptiveIcon": { "foregroundImage": "./assets/adaptive-icon.png", "backgroundColor": "#ffffff" } }, "web": { "favicon": "./assets/favicon.png" } } }