Lucy Wilson (@LWilsonDev)

Typescript: Create a React Component with conditional props for each variant

You have a lovely component that takes some props. interface PropsA { pear: string; apple: string; } const ComponentA: FC<PropsA> = (props) => { return ///; }; We then realise that we have another component which looks the same but has a diff...

Aug 7, 2023 · 2 min readlwilsondev.co.uk

Monitoring and measuring React Native performance

Improving performance in a React Native app can sometimes feel like a thankless task - you might spend hours refactoring and optimising, but how can you tell if it's helping? When developing for the web there are a lot of tools that can help with per...

1Jun 9, 2023 · 5 min readlwilsondev.co.uk

React Native text input styled using just Tailwind - scaling up for accessibility

Creating nice styled text inputs in React Native is now easier than ever thanks to Tailwind, meaning we don't need to turn to large UI component libraries like Material any more. However, when ditching the libraries we must now consider all the acces...

Jun 3, 2023 · 3 min readlwilsondev.co.uk

Animated bar chart on load - React Native

See the finished example Aim Animate a bar chart on the initial load, and when the data changes. The bars should grow in height. Attempt 1 Reanimated provides layout animations out of the box, such as SlideInUp and FadeIn. These are easy to use and r...

Apr 13, 2023 · 3 min readlwilsondev.co.uk

Simple animated tab bar in React Native

I was looking to build this form designed by pixelz-studio where a user can select to log in either by email or phone number by selecting a button, styled like a tab. I liked the idea of animating the tab selection so that the tab would appear to sli...

Feb 4, 2023 · 4 min readlwilsondev.co.uk

Lucy Wilson

About

Available for

Lucy Wilson's blogs

Typescript: Create a React Component with conditional props for each variant

Monitoring and measuring React Native performance

React Native text input styled using just Tailwind - scaling up for accessibility

Animated bar chart on load - React Native

Simple animated tab bar in React Native

Lucy Wilson

About

Available for

Lucy Wilson's blogs

Typescript: Create a React Component with conditional props for each variant

Monitoring and measuring React Native performance

React Native text input styled using just Tailwind - scaling up for accessibility

Animated bar chart on load - React Native

Simple animated tab bar in React Native

Lucy Wilson

About

Available for

Lucy Wilson's blogs

Typescript: Create a React Component with conditional props for each variant

Monitoring and measuring React Native performance

React Native text input styled using just Tailwind - scaling up for accessibility

Animated bar chart on load - React Native

Simple animated tab bar in React Native

Search Hashnode

Lucy Wilson

About

Available for

Lucy Wilson's blogs

Typescript: Create a React Component with conditional props for each variant

Monitoring and measuring React Native performance

React Native text input styled using just Tailwind - scaling up for accessibility

Animated bar chart on load - React Native

Simple animated tab bar in React Native