Simple Styling with React Native - reactjs

Question

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',
},
});

Answer 1

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',
},
});

Answer 2

It could be due to this typo in your code :
<View stlye={styles.container}>