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

Question

How Do I create that Button in React Native?

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?

Sebastijan Dumančić · Accepted Answer · 2018-10-15 09:40:51Z

2

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.

answered Oct 15, 2018 at 9:40

Sebastijan Dumančić

1,1921 gold badge12 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Benny Sudibyo Over a year ago

Awesome.Thanks.

Benny Sudibyo Over a year ago

But I need gradient , also.

Sebastijan Dumančić Over a year ago

@BennySudibyo Check the last link in the answer, please.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related