CODEWITHSUNDEEP
reactjsreact-native
Lucas Alves
Lucas Alves

Reputation: 11

Button Alignment and Styling - React Native

How can I align this button to the center of the screen and make it thinner? It´s currently on the top of the screen. I cannot add a picture since I'm using my cellphone as simulator.


const Stack = createStackNavigator();

const MyStack = () => {
    return(
        <NavigationContainer>
            <Stack.Navigator>
            <Stack.Screen 
                    name="Principal"
                    component={TelaPrincipal}
                    options={{title:'Bem Vindo à tela principal'}}
              ></Stack.Screen>
              <Stack.Screen 
                name="Tela02"
                component={Tela02}
                options={{title:'Bem Vindo à tela 02'}}
              ></Stack.Screen>
              <Stack.Screen 
                name="Tela03"
                component={Tela03}
                options={{title:'Bem Vindo à tela 03'}}
              ></Stack.Screen>
            </Stack.Navigator>
        </NavigationContainer>
    );

};

    const TelaPrincipal = ({navigation}) => {
        return(
            <View>
                <Button
                    title = 'Ir para Tela 02'
                    onPress= {() => navigation.navigate('Tela02', {name:'Tela02'})}
                    color='red'
                ></Button>
            </View>
        );

    };```

Upvotes: 0

Views: 37

Answers (1)

Saulo M
Saulo M

Reputation: 328

In the View wrapper of Tela Principal, try adding this style:

style={{
  flex: 1,
  alignItems: 'center',
  justifyContent: 'center',
}}

It may be a good start to get you where you wanna get.

Upvotes: 1

Related Questions