Styling Buttons when press from native base in react native application

Question

i just used some buttons from native base in my react native application and i need to modify their style. In fact a button have a different style than a clicked button. I have two buttons: the first one renders the default page and have a first style . When clicking the second button, i have the second page rendered and change the style. Here is the code i'm using :

<View style={{flexDirection: 'row'}}>
    <Button onPress={() => this.setState({selectedTab: 'Tab1'})}>
            <Text>tab 1 </Text>
    </Button>

    <Button onPress={() => this.setState({selectedTab: 'Tab2'})}>
            <Text>tab 2</Text>
    </Button>
</View>

I need to implement a similar styling:

@SupriyaKalghatgi actually i'm not looking for tabs or segments. I'm looking for a way to change the **styling of a button when pressed** or not. Do you know how to do it ? thank you — user3521011, May 25 '17 at 10:00
Try adding `onFocus` prop in the theme and style for the same — Supriya Kalghatgi, May 26 '17 at 06:05

score 0 · Answer 1 · answered Aug 21 '22 at 09:26

Native base 3 has a _pressed prop to pass props when button is pressed.

<Button
          size="lg"
          height={16}
          marginTop={6}
          marginBottom={2.5}
          _text={{ fontSize: 16 }}
          _pressed={{ opacity: 0.6 }}
        >
          OK
        </Button>

See more https://docs.nativebase.io/button

Styling Buttons when press from native base in react native application

1 Answers1