CODEWITHSUNDEEP
react-native
Benny Sudibyo
Benny Sudibyo

Reputation: 69

React Native Custom Button (include two background, two inner component)

How Do I create that Button in React Native?

enter image description here

As above, button component include two part , left is text part, right part include another background color and image. But, whole button component includes same border radius and gradient. Does somebody might know how to get to this?

Upvotes: 0

Views: 154

Answers (1)

Sebastijan Dumančić
Sebastijan Dumančić

Reputation: 1182

You should wrap two sibling View components with TouchableOpacity component which will handle onPress for the whole button. Position them side by side using flex and set explicit sizes on each. Left element should get borderTopLeftRadius and borderBottomLeftRadius and right should get borderTopRightRadius and borderBottomRightRadius. Border radius is solved separately but it would seem like it's all in one, and for gradient do you mean this inner shadow or something else?

It's because inset shadow does not exist in RN, but it can be faked quite realistically. Read more here: https://github.com/facebook/react-native/issues/2255.

If you really wan't to use gradient, you must use https://github.com/react-native-community/react-native-linear-gradient and position it absolutely over everything and just set it in the background using zIndex property.

Upvotes: 2

Related Questions