fergalmoran/argon-react-native
1
0
Fork 0
mirror of https://github.com/fergalmoran/argon-react-native.git synced 2025-12-22 09:19:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

first render fixed

Browse Source
This commit is contained in:
Alin Gheorghe
2020-03-05 18:40:17 -05:00
parent d34a867b0a
commit 29864f971b
5 changed files with 29 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
App.js
View File

@@ -1,11 +1,16 @@
import React from 'react'; import React from "react";
import { Image } from 'react-native'; import { Image } from "react-native";
import { AppLoading } from 'expo'; import { AppLoading } from "expo";
import { Asset } from 'expo-asset'; import { Asset } from "expo-asset";
import { Block, GalioProvider } from 'galio-framework'; import { Block, GalioProvider } from "galio-framework";
import { NavigationContainer } from "@react-navigation/native";
import Screens from './navigation/Screens'; // Before rendering any navigation stack
import { Images, articles, argonTheme } from './constants'; import { enableScreens } from "react-native-screens";
enableScreens();
import Screens from "./navigation/Screens";
import { Images, articles, argonTheme } from "./constants";
// cache app images // cache app images
const assetImages = [ const assetImages = [
@@ -23,7 +28,7 @@ articles.map(article => assetImages.push(article.image));
function cacheImages(images) { function cacheImages(images) {
return images.map(image => { return images.map(image => {
if (typeof image === 'string') { if (typeof image === "string") {
return Image.prefetch(image); return Image.prefetch(image);
} else { } else {
return Asset.fromModule(image).downloadAsync(); return Asset.fromModule(image).downloadAsync();
@@ -33,11 +38,11 @@ function cacheImages(images) {
export default class App extends React.Component { export default class App extends React.Component {
state = { state = {
isLoadingComplete: false, isLoadingComplete: false
} };
render() { render() {
if(!this.state.isLoadingComplete) { if (!this.state.isLoadingComplete) {
return ( return (
<AppLoading <AppLoading
startAsync={this._loadResourcesAsync} startAsync={this._loadResourcesAsync}
@@ -47,19 +52,19 @@ export default class App extends React.Component {
); );
} else { } else {
return ( return (
<GalioProvider theme={argonTheme}> <NavigationContainer>
<Block flex> <GalioProvider theme={argonTheme}>
<Screens /> <Block flex>
</Block> <Screens />
</GalioProvider> </Block>
</GalioProvider>
</NavigationContainer>
); );
} }
} }
_loadResourcesAsync = async () => { _loadResourcesAsync = async () => {
return Promise.all([ return Promise.all([...cacheImages(assetImages)]);
...cacheImages(assetImages),
]);
}; };
_handleLoadingError = error => { _handleLoadingError = error => {
@@ -71,5 +76,4 @@ export default class App extends React.Component {
_handleFinishLoading = () => { _handleFinishLoading = () => {
this.setState({ isLoadingComplete: true }); this.setState({ isLoadingComplete: true });
}; };
} }

2
components/Card.js
View File

@@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { withNavigation } from 'react-navigation'; import { withNavigation } from '@react-navigation/compat';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { StyleSheet, Dimensions, Image, TouchableWithoutFeedback } from 'react-native'; import { StyleSheet, Dimensions, Image, TouchableWithoutFeedback } from 'react-native';
import { Block, Text, theme } from 'galio-framework'; import { Block, Text, theme } from 'galio-framework';

2
components/Header.js
View File

@@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { withNavigation } from 'react-navigation'; import { withNavigation } from '@react-navigation/compat';
import { TouchableOpacity, StyleSheet, Platform, Dimensions } from 'react-native'; import { TouchableOpacity, StyleSheet, Platform, Dimensions } from 'react-native';
import { Button, Block, NavBar, Text, theme } from 'galio-framework'; import { Button, Block, NavBar, Text, theme } from 'galio-framework';

2
navigation/Screens.js
View File

@@ -131,7 +131,7 @@ export default function OnboardingStack(props) {
<Stack.Navigator mode="card" headerMode="none"> <Stack.Navigator mode="card" headerMode="none">
<Stack.Screen <Stack.Screen
name="Onboarding" name="Onboarding"
component={Pro} component={Onboarding}
option={{ option={{
headerTransparent: true headerTransparent: true
}} }}

2
screens/Onboarding.js
View File

@@ -52,7 +52,7 @@ class Onboarding extends React.Component {
<Button <Button
style={styles.button} style={styles.button}
color={argonTheme.COLORS.SECONDARY} color={argonTheme.COLORS.SECONDARY}
onPress={() => navigation.navigate("Home")} onPress={() => navigation.navigate("App")}
textStyle={{ color: argonTheme.COLORS.BLACK }} textStyle={{ color: argonTheme.COLORS.BLACK }}
> >
Get Started Get Started