CODEWITHSUNDEEP
cssreactjsreact-native
URL87
URL87

Reputation: 11012

React Native - how to make a border image?

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

How could I achieve it ?

Upvotes: 13

Views: 6437

Answers (3)

Muhammad Shoaib Riaz
Muhammad Shoaib Riaz

Reputation: 214

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>

Upvotes: 1

tnt-rox
tnt-rox

Reputation: 5548

I would go with an image that contains your border as the first element of your view and some padding on the contents of the view. 

<Image
        style={{
          backgroundColor: '#ccc',
          position: 'absolute',
          width: '100%',
          height: '100%',
          justifyContent: 'center'
        }}
        source={{ uri: 'path/to/your/image/of/border' }}
>

<Text
          style={{
            backgroundColor: 'transparent',
            textAlign: 'center',
            fontSize: 30,
            padding: 40,
          }}
        >
          {text}
</Text>

Upvotes: 0

Droow
Droow

Reputation: 416

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!

Upvotes: 3

Related Questions