CODEWITHSUNDEEP
react-nativereact-native-paper
raju
raju

Reputation: 6936

Button width in react-native-paper

I am starting learning react-native-paper, i am not sure how to fix button width, currently it fills whole parent container.

    <View>
        <Button 
        icon="camera" 
        mode="contained" 
        onPress={() => console.log('Pressed')}
        contentStyle={styles.btn}
        >
            Press me
        </Button>
    </View>



const styles = StyleSheet.create({
    btn: {
        width: 30
    }
})

This is not working and button is still full width. Need some help.

Upvotes: 2

Views: 8000

Answers (3)

azwar_akbar
azwar_akbar

Reputation: 1651

You can make it fit to content dynamically without defining number or width. You can override style attribute alignSelf to 'flex-start'. Here is the example:

      <Button
        mode="outlined"
        onPress={() => console.log("Pressed")}
        style={{alignSelf: 'flex-start' }}
      >
        Save
      </Button>

Upvotes: 3

Haydn Oleson
Haydn Oleson

Reputation: 3

If your View tag is a container for the button, the button needs its own View tag with the styles prop called there.

    <View>
      <View style={styles.btn}>
       <Button 
          icon="camera" 
          mode="contained" 
          onPress={() => console.log('Pressed')}
       >
        Press me
       </Button>
      </View>
    </View>



    const styles = StyleSheet.create({
      btn: {
        width: 30
      },
    });

Upvotes: 0

Ferin Patel
Ferin Patel

Reputation: 3968

You can change the width of Button directly using style props and adding width to it.

<Button 
   icon="camera" 
   mode="contained" 
   onPress={() => console.log('Pressed')}
   style={{ width: 100 }}
>
  Press me
</Button>

Upvotes: 2

Related Questions