How I can I layout buttons in react native?

Question

This is the result that I hope.enter image description here

Here's my code

import React from 'react';
import {View, Text, SafeAreaView, Button, StyleSheet} from 'react-native';
import { useNavigation } from '@react-navigation/native';

const HomeScreen = (props) => {
   const navigation = useNavigation();
   return (
    <SafeAreaView style={{flex: 1}}>
      <View style={{flex: 1, padding: 100}}>
        <View>
        <View style={styles.container}>
            <Button
                style={styles.button}
                title="aw"
                onPress={() => navigation.navigate('cameraScreenStack')}
            />
            <Button
                style={styles.button}
                title="bdsfw"
                onPress={() => navigation.navigate('ledgerScreenStack')}
            />
        </View>
        <View style={styles.container}>
            <Button
                style={styles.button}
                title="cwd"
                onPress={() => navigation.navigate('recommendScreenStack')}
            />
            <Button
                style={styles.button}
                title="ddfa"
                onPress={() => navigation.navigate('settingScreenStack')}
            />
        </View>
        </View>
      </View>
    </SafeAreaView>
    );
};

export default HomeScreen;

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {

  }
});

This picture is what it look likes right now. enter image description here

I want to make buttons bigger, padding between buttons, and unify button size. How can I fix my code?

score 0 · Answer 1 · answered Jun 06 '22 at 09:02

ive added a demo below, basically in place of button you have to use touchableOpacity

import * as React from "react";
import {
  Text,
  View,
  StyleSheet,
  Animated,
  ImageBackground,
  TouchableOpacity
} from "react-native";

const App = () => {
  const [sel,setSel] = React.useState(1);

  const onPress = (item) => setSel(item)

  const renderEachButton = (item) => {
    return(
       <TouchableOpacity onPress={() =>onPress(item)}  style={[styles.buttonStyles,{backgroundColor:item===sel?'gray':null}]}>
        <Text>Button{item}</Text>
      </TouchableOpacity>
    )
  }

  const data = [1,2,3,4]

  return (
    <View style={{ flex: 1 ,flexDirection:'row',flexWrap:'wrap',paddingHorizontal:10,justifyContent:'space-between'}}>

     {data.map((item,index) => renderEachButton(item))}
       
    </View>
  );
};

const styles = StyleSheet.create({

  buttonStyles: {
    paddingHorizontal: 40,
    paddingVertical: 30,
    borderWidth: 1,
    marginVertical:10,
    marginHorizontal:5,
    alignItems:'center',
    justifyContent:'center',
    borderRadius:5
  }
});

export default App;

Letme know in case of any doubts

https://snack.expo.dev/qlvKx1job

How I can I layout buttons in react native?

1 Answers1