CODEWITHSUNDEEP
reactjsreact-nativestyling
Evan Bloemer
Evan Bloemer

Reputation: 1081

Simple Styling with React Native

I am trying to create a basic app that navigates pages, but for some reason my react native code isn't including the styling. In the view, I clearly state that it should use the styles.container, but it doesn't respond. I tried to use the same styling code from the tutorial, but whenever I change any of the elements, even just the color, the button doesn't change. When I have a Text element instead, it still doesn't change. What am I doing wrong?

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import Expo from 'expo';
import { createStackNavigator } from 'react-navigation';


class HomeScreen extends React.Component {
    static navigationOptions = {
        title: 'Home',
    };
    render() {
        const{ navigate } = this.props.navigation;
        return (
          <View stlye={styles.container}>
              <Button
                  style={styles.container}
                  title="Go to the profile screen."
                  onPress = { () =>
                      navigate('Profile')
                  }
              />
          </View>
        );
    }
}


class ProfileScreen extends React.Component {
    static navigationOptions = {
        title: 'Profile',
    };
    render() {
        const{ navigate } = this.props.navigation;
        return (
            <View stlye={styles.container}>
                <Button
                    style={styles.container}
                    title="Go to the home screen."
                    onPress = { () =>
                        navigate('Home')
                    }
                />
            </View>
        );
    }
}

const NavigationApp = createStackNavigator({
    Home: { screen: HomeScreen },
    Profile: { screen: ProfileScreen },
    }, {
    navigationOptions: {
        headerStyle: {
            marginTop: Expo.Constants.statusBarHeight
        }
    }
});

export default class App extends React.Component {
    render() {
        return <NavigationApp />;
    }
}

const styles = StyleSheet.create({
   container: {
       flex: 1,
       alignItems: 'center',
       justifyContent: 'center',
   },
});

Upvotes: 0

Views: 63

Answers (2)

Ayushya
Ayushya

Reputation: 1920

You are setting up stlye instead of style in <View.

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import Expo from 'expo';
import { createStackNavigator } from 'react-navigation';


class HomeScreen extends React.Component {
    static navigationOptions = {
        title: 'Home',
    };
    render() {
        const{ navigate } = this.props.navigation;
        return (
          <View style={styles.container}>
              <Button
                  style={styles.container}
                  title="Go to the profile screen."
                  onPress = { () =>
                      navigate('Profile')
                  }
              />
          </View>
        );
    }
}


class ProfileScreen extends React.Component {
    static navigationOptions = {
        title: 'Profile',
    };
    render() {
        const{ navigate } = this.props.navigation;
        return (
            <View style={styles.container}>
                <Button
                    style={styles.container}
                    title="Go to the home screen."
                    onPress = { () =>
                        navigate('Home')
                    }
                />
            </View>
        );
    }
}

const NavigationApp = createStackNavigator({
    Home: { screen: HomeScreen },
    Profile: { screen: ProfileScreen },
    }, {
    navigationOptions: {
        headerStyle: {
            marginTop: Expo.Constants.statusBarHeight
        }
    }
});

export default class App extends React.Component {
    render() {
        return <NavigationApp />;
    }
}

const styles = StyleSheet.create({
   container: {
       flex: 1,
       alignItems: 'center',
       justifyContent: 'center',
   },
});

Upvotes: 2

coeu5a
coeu5a

Reputation: 185

It could be due to this typo in your code :

          <View stlye={styles.container}>

Upvotes: 1

Related Questions