Button Alignment and Styling - React Native

Question

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>
        );

    };```

Saulo M · Accepted Answer · 2021-08-19 19:26:06Z

1

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.

answered Aug 19, 2021 at 19:26

Saulo M

3283 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Button Alignment and Styling - React Native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related