React Native - how to make a border image?

Question

I want to make a border image to a View , similar to border-image in the css.

How could I achieve it ?

Answer 1

You can use ImageBackground component of react-native and wrap your view inside component by adding some padding around your nested view

<ImageBackground source={imageSource}>
 <Text style={{padding:20}}> Inside </Text>
</ImageBackground>

Answer 2

I believe that if you use Styled Components (https://www.styled-components.com/) you can set it with CSS directly. It will be something like this:

import styled from 'styled-components/native';

const StyledView = styled.View`
  border-image: <your definition here>;
`;

And then simply use it like you always do:

<StyledView>

</StyledView>

Hope it helps!