Write your own flexible custom border image component in react native

Creating a new Box component: step 1

made box styleable via setup

added 4 sides and 4 corners to our component with temp styles

added base styles for sides and corners and location-based variations

adjusted side/corner styles a bit for full length

changed logical OR to nullish coalescing operator

As this is only included in ES2020, make sure to check your Babel (or Metro or any other transpiler you might be using) to know and understand ES2020.

added second box with custom styling

Added background view with flexible colour and offset

added custom offset to second example in code

added optional default offset based on border width

added background images for border tiles

Ain’t that pretty? … you gotta love programmers art!

switched out inline config for border images to imported one

I cut off this one, it’s repetitive… don’t forget the setupOffset!

added new example and scale option

added 2 scaled examples of warning frame with offset

Working with the Box in projects

Some words about me:

--

--

--

I’m a Web / App Developer & father 👨‍👩‍👧 doing freelance and part-time agency work since 2003, 💻 building stuff on the side 🕹 and attending conferences 🎟

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Storybook with React

Everything to React at a glance for Beginners

Angular Routing — Reusing common layout for pages from different modules

Rant — Roadmap, Dogfooding and NPM

Database Interactions In Nest Framework

Stroke property on Mac

NodeJS Performance Optimization with Clustering

React Native Component Library — Making things theme-able

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Konrad Abe

Konrad Abe

I’m a Web / App Developer & father 👨‍👩‍👧 doing freelance and part-time agency work since 2003, 💻 building stuff on the side 🕹 and attending conferences 🎟

More from Medium

Exploring Chakra UI — A New React App.

Rendering a web content in native view using WebView API in react-native

Paginating Firestore with Realtime Updates in React

Next js Firebase Authication