0

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?

1 Answer 1

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.

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

3 Comments

Awesome.Thanks.
But I need gradient , also.
@BennySudibyo Check the last link in the answer, please.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.