How to change button size in react native?

Hi Friends 👋,

Welcome To aGuideHub!

To change button size in react native, you have to use TouchableOpacity with the style attribute because in Button component there haven’t option for style. so it’s better to use the TouchableOpacity component.

See a short example of the TouchableOpacity with the style attribute to change the size of the button.

<TouchableOpacity
  style={styles.button}
  onPress={() => Alert.alert("Simple Button pressed")}
>
  <Text>Press Here</Text>
</TouchableOpacity>

const styles = StyleSheet.create({
  button: {
    alignItems: 'center',
    backgroundColor: '#AD436D',
    height: 30,
    width: 150,
    marginTop: 20,
    justifyContent: 'center',
  },
});

In this article, you will get a complete example to create and change the size of the button in react native.

As an earlier mention, I’m going to use the TouchableOpacity component.

Let’s start today’s tutorial Example of change button size in react native

In the below example, I used TouchableOpacity from react-native and provided an example of changing the size of the button.

Here, I have created a button component using TouchableOpacity.

import {
  StyleSheet,
  SafeAreaView,
  Alert,
  TouchableOpacity,
  Text,
} from 'react-native';

const App = () => (
  <SafeAreaView style={styles.container}>
    <TouchableOpacity
      style={styles.button}
      onPress={() => Alert.alert('Simple Button pressed')}>
      <Text>Press Here</Text>
    </TouchableOpacity>
  </SafeAreaView>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    marginHorizontal: 16,
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#AD436D',
    height: 30,
    width: 150,
    marginTop: 20,
    justifyContent: 'center',
  },
});

export default App;

Here, we are provided code expo links for the above program to change the size of the button. Then you can use it whenever you want and make the changes per your requirements.

You can also use the below link to check the output of the above program.

Try it Yourself

All the best 👍