DEV Community: iway1

Actual Gradient Borders in React Native (the almighty Masked View)

iway1 — Sun, 28 Aug 2022 19:55:00 +0000

(Just want the package? check it out here)

If you Google "React Native gradient border" like I did you may find yourself a little disappointed.

I needed to make something like this:

I needed just a gradient border with a transparent background, but when I searched the internet for solutions all that showed up in my search had something like:

<LinearGradient
    style={{
      height: 150,
      width: 200,
      borderRadius: 20,
    }}
>
    <View
        style={{
          borderRadius: 15,
          flex: 1,
          margin: 5,
          backgroundColor: '#fff',
          justifyContent: 'center',
        }}
    >
       {/* some other stuff */}
    </View>
</LinearGradient>

Which might look something like:

This is simulates a gradient border but it is not a gradient border. It is a full on gradient view hidden behind some other view with a certain background color.

This solution can work sometimes, but it isn't a universal solution and it's a bit janky to work with (because making changes becomes more difficult since we're adjusting multiple props in both the parent and child, and it requires two views to have their backgrounds in sync).

If you needed a non-static background, like say you wanted to show an image like I needed too, none of these solutions would work at all (because, again we're needing two views to have matching backgrounds).

So, I was discouraged, but then I came across a library that could easily allow me to implement a true gradient border.

Masked Views to the rescue 💯

@react-native-masked-view/masked-view is an incredibly powerful library. CSS has view masking if you're in web dev as well, but for React Native we will need a library (of course). Luckily @react-native-masked-view/masked-view is well maintained and even used by @react-navigation

What's masking

Masking applies one view as a mask to another target view, which means it takes the opacity values from the mask view view and applies them to the target view.

That may not sound like much, but it can be used to create absolutely amazing visuals if used correctly. Here's a really simple example with some really cool text effects:

The masked view is great because it's both simple to use once you know how it works, but also has huge potential for creating compelling visuals in your UI.

You can think of it as sort of "cutting out a slice" of one view in the shape of another view, but it also works with any opacity value including gradients. So you can create things like this, too, using an image plus a gradient:

So in our React Native app, if we wanted to create a gradient giraffe cutout with @react-native-masked-view/masked-view, we can do:

<MaskedView
  style={{ flex: 1 }}
  maskElement={(
    <View
      style={[StyleSheet.absoluteFill]}
    >
      <ImageBackground
        style={[StyleSheet.absoluteFill]}
        resizeMode='contain'
        source={require('./giraffe.png')}
      />
    </View>

  )}
>
  <LinearGradient
    colors={['red', 'blue']}
    style={StyleSheet.absoluteFill}
    pointerEvents='none'
  />
</MaskedView>

Here the mask is a giraffe shape, and the target view is a gradient, so we get a gradient giraffe. Note that the actual image has a transparent background, which is very important when masking things because, again, masks apply only the opacity of the image to the target element (LinearGradient).

By the way, I'm not saying that you should or shouldn't have a gradient giraffe in your app, I'm just trying to make the point the MaskedView can apply the opacity values from any mask element to any target view. The actual image looks like this:

Notice the colors of the image don't actually matter, just the opacity.

Anyways, we don't need to get that fancy for what we're doing.

All we need to do is create a border-shaped mask and apply it to a LinearGradient. Seems so simple when you think about it. In @react-native-masked-view/masked-view it's just a little bit of code.

💯 A universal solution to gradient borders 💯

<MaskedView
    maskElement={(
        <View
            pointerEvents='none'
            style={[
                StyleSheet.absoluteFill, 
                { borderWidth, borderRadius }]}
        />
    )}
    style={[StyleSheet.absoluteFill]}
>
    <LinearGradient
        colors={['red', 'orange']}
        pointerEvents='none'
    />
</MaskedView>

This component would go inside the component to which we want to apply a gradient border. Notice the absolute fill style, this will make sure it applies the borders to the edge of the immediate parent view.

It's actually kind of hilarious how much less code this is to achieve a better result than the solutions that you'll find when you google this question.

Issues

The main issue with this approach is that it doesn't adjust the layout to compensate for the border. For example, if you don't apply padding to the parent view the gradient border can overlaid on top of components:

So we'll need to apply additional padding to compensate:

style={{
  width: 200,
  height: 200,
  padding: 20,
}}

That can be a pain to do, because when changing the border width we'd also need to change the view's padding.

🤔 How do we solve this once and for all?

As is often possible in React (Native), we can create reusable components with a great APIs that do all of the tedious stuff for us, and then in the future we can reach for it by default! We just need to make sure it's well-thought out enough to support any future use cases.

SO, we can create a reusable component that automatically applies padding, which is what I've done in my package @good-react-native/gradient-border:

<GradientBorderView
  gradientProps={{
    colors: ['red', 'blue']
  }}
  style={{
    borderWidth: 5,
    width: 200,
    height: 200,
  }}
>
  <Text>
    Automatic Padding!
  </Text>
</GradientBorderView>

Notice the gradientProps prop getting passed to <GradientBorderView/>. That can have any prop that expo-linear-gradient's <LinearGradient/> component supports, and it's typesafe! Sweet. That means we can get creative with our settings:

gradientProps={{
  colors: ['red', 'orange', 'blue', 'green'],
  start: { x: 0.5, y: 0, },
  end: { x: 1, y: 1 }
}}

I did my best to try and make sure the GradientBorderView behaves exactly like a normal view, except it has a gradient border. That means it supports any of the typical border styles and we can change the border radius of individual corners as well as the width of sides:

style={{
  justifyContent: 'center',
  alignItems: 'center',
  width: 100,
  height: 100,
  borderLeftWidth: 5,
  borderTopLeftRadius: 10,
  borderRightWidth: 5,
  borderBottomRightRadius: 5,
  borderBottomWidth: 2,
  borderBottomLeftRadius: 20,
  borderTopWidth: 0.25
}}

Like I said, you don't need to do any of this yourself, you can just download my package to create an actual gradient border.

This is only the beginning

The last thing I want to say is that this is just one potential application of @react-native-masked-view/masked-view, there are so many other possibilities with this tool!

For example something like this fade away scroll view where components fade out as they get near the top of the view:

It's really powerful, so get creative!

Thanks for reading I really do appreciate it ❤️

The most important typescript trick you'll ever learn

iway1 — Mon, 22 Aug 2022 03:04:00 +0000

There's one thing typescript trick in particular that changed everything for me, and that's using the extends keyword in generic type parameters for the sole purpose of enabling inference:

function myFunctionInferred<Type extends Object>(v: Type) {
    return v;
}
function myFunctionNotInferred(v: Object) {
    return v;
}

This allows typescript to infer the type of var, meaning that you will get superior type knowledge and intellisense for free:

// v is given the type {something: string}
const v = myFunctionInferred({something: 'value'}); 

// v is given the type Object
const v = myFunctionNotInferred({something: 'value'});

Obviously we're getting a lot of additional information because of that type parameter! This is the simplest example possible and even it is potentially valuable.

What's even better is it opens up an entirely new world of free inferred type safety:

const someCoolObject = {
    keyOne: 'string value',
    keyTwo: false,
    keyThree: 5,
}

function myFunction<KeyType extends keyof typeof someCoolObject, ValueType extends typeof someCoolObject[KeyType]>(k: KeyType): ValueType {
    return someCoolObject[k] as ValueType;
}

This gives us great autocomplete, of course:

But much more interestingly, v has its type inferred based on the string that gets passed to the function!

🤯 That's so cool! And it's extremely useful in practice, you just have to get creative.

Fixing Keyboard Avoiding in React Native

iway1 — Mon, 22 Aug 2022 02:42:00 +0000

I love React Native, but one thing that has always felt overly difficult to get right in my applications is implementing keyboard avoiding behavior. So, maybe it's time we make it easier for everyone.

And I know what you may be thinking, React Native has a KeyboardAvoidingView. Just use that, right? that's easy enough?

I wish it was that simple.

React Native's biggest mistake?

The KeyboardAvoidingView can work well sometimes, but there are many layouts where it simply just doesn't work (and probably never will). Plus, it's inconsistent across platforms.

Let's take a look at some simple layout:



function SomeSimpleLayout() {
    return (
        <View style={{
            flex: 1,
        }}>
            <View
                style={{
                    height: Dimensions.get('window').height - 300,
                    width: '100%',
                    justifyContent: 'flex-start'
                }}
            />
            <KeyboardAvoidingView>
                <TextInput
                    style={textInputStyle}
                />
                <TextInput
                    style={textInputStyle}
                />
            </KeyboardAvoidingView>
        </View>
    )
}

This is pretty similar to a design I had to implement at my consulting job recently.

It just doesn't work. Yes, you heard me right, React Native's own KeyboardAvoidingView can't avoid the keyboard in this very simple situation.

Maybe they should call it the KeyboardSometimesMaybeAvoidingIfItFeelsLikeItView? To add insult to injury, when it does work it doesn't provide consistency across platform.

You may be thinking, did you try all the different values for the behavior prop. Yes, I did. They didn't work.

And even if they did work it would still suck, because a KeyboardAvoidingView should just avoid the dang keyboard. It shouldn't make me have to remember and think about implementation details.

This is something I've dealt with from time to time throughout the entire course of my React Native consulting career, and it always felt so bad.

Why can't we just have a view that avoids the keyboard consistently? Is keyboard avoiding that hard?

Well, is it really that hard?

The answer is... No. It really isn't. React Native just screwed the pooch on this one.

Again, I ❤️love❤️ React Native. It's an amazing tool and has allowed me to build some amazing things really quickly. But this component freaking sucks. The API is bad, it doesn't handle all use cases, it's just clunky and provides a bad developer experience.

What makes it worse is that this is included in React Native itself, which means developers are likely to choose it as their first solution!

Think about the number of hours that have gone into tweaking layouts to get the KeyboardAvoidingView to work properly on iOS, only to have it behave unexpectedly on Android?

There's got to be a better way. We can fix this, we're engineers.

The solution

Using the power of basic geometry and knowledge of React Native, we can build a keyboard avoiding view that works in every layout. A keyboard avoiding view that actually avoids the keyboard all the time. Let's call it the, uhhh... KeyboardAvoiderView! 😬

And it will avoid the keyboard 😁:

Same layout as before, only now KeyboardAvoiderView avoiders the keyboard. Nice! And it will work in any layout, because it uses transforms (which are independent of the layout) instead of animating properties that affect that layouts

Also, it has the same behavior on both platforms:

Awesome. That's what we wanted. How does it work? Well you can view the full source code of the component I made to do this here if you want, but that's probably not as useful for you to know as knowing the key implementation details of the Component:

KeyboardAvoiderView key implementation details

React Native allows us to get the currently focused text input from TextInput.State.currentlyFocusedInput(), and we can measure that input with .measure():



function MyComponent() {
    function handleKeyboardShow(e) {
        const input = TextInput.State.currentlyFocusedInput();
        if(!input) return;
        input.measure((x, y, width, height, pageX, pageY)=>{
            const inputBottom = (pageY + height);
        })
    }
}

That's actually really cool, and is required for implementing keyboard avoiding behavior. Any time we want a ref to the currently focused input we can just call that function.

The keyboard end coordinate is passed to keyboard event handlers:



function MyComponent() {
    function handleKeyboardShow(e) {
        const topOfKeyboard = e.endCoordinates.screenY;
    }
}

Android has system keyboard behavior that cannot be disabled, so we have to calculate that and compensate for it:



function MyComponent() {
    function handleKeyboardShow(e) {
        const input = TextInput.State.currentlyFocusedInput();
        if(!input) return;
        input.measure((x, y, width, height, pageX, pageY)=>{
            const inputBottom = (pageY + height);
            // How much the system panned by
            const androidPannedBy = Math.max(inputBottomY - e.endCoordinates.screenY, 0);
        })
    }
}

Here we calculate the distance Android would pan the screen when the keyboard shows. It'd be nice if Android let us disable the system behavior, but it doesn't. That's okay. We know math.

Now, we can just calculate the amount we should move based on these values:



var weShouldScrollBy = inputBottom - extraSpace - topOfKeyboard;
if(Platform.OS == 'android') weShouldScrollBy += androidPannedBy;

Notice the extraSpace variable, that's the distance we want to have between the input and the keyboard. If we didn't have that, we wouldn't even need to perform any calculations on Android, but remember we want cross platform consistency!

We won't dive too much into the code , but the full KeyboardAvoiderView is available in my package @good-react-native/keyboard-avoider(Yes I'm shilling my own library in this post, but only because I do think we can solve a real problem here).

What about scroll views?

Some times we have text inputs in scroll views. In these cases, we just use react-native-keyboard-aware-scroll-view, yeah?

Not so fast. react-native-keyboard-aware-scroll-view is a very useful library, it works and the api is good.

Unfortunately, it has some considerable shortcomings. I go into detail about them in my package repo, but the main issues are the fact that it simply breaks in some situations and lacks responsiveness/consistency.

Like KeyboardAwareScrollView, react-native-keyboard-aware-scroll-view doesn't work with all layouts. If it's not fullscreen, it breaks:

Also, it will bug out any time you're using react navigation. (Yes this bug still exists, no you cannot avoid it in all situations).

It's not maximally responsive:

Notice the input getting covered up. This isn't extremely noticeable but it is worse than if the input was able to avoid the keyboard entirely (IMO).

Plus, it doesn't match the behavior of the KeyboardAvoidingView. (it uses the ScrollView's scrollTo method instead of handling scrolling itself). There are more issues as well, but I think you'll get the point by now.

And by the way, I really appreciate the devs at react-native-keyboard-aware-scroll-view for contributing to the community. If I sound upset, it's only because I'm scarred from all of the issues this library has caused me and my clients, and because I know that it could be better.

We're engineers, we can improve things. There's always a better way. And that better way is called, uh... KeyboardAvoiderScrollView?

Another member of @good-react-native/keyboard-avoider. This scroll view has behavior consistent with the KeyboardAvoiderView, is more responsive, and wont break based on the rest of the screen.

How is KeyboardAvoiderView doing this you might ask? The main reasons are that:

It uses an animation instead of scrolling the scroll view with the built in animation, which allows for greater control of the animation.
It uses absolute page measurements (I'm not sure why, but react-native-keyboard-aware-scroll-view uses window measurements, which may be why it breaks).

Anyways

Anyways, that's it. I made a package that seems to be a significant improvement for all types of keyboard avoidering behavior compared with what people typically use in React Native (KeyboardAvoidingView and react-native-keyboard-aware-scroll-view).

There's even a <KeyboardAvoiderInsets/> component for when you do want to alter your layout when the keyboard shows.

Again, you can check it out here. It's still in its early stages so it's definitely got a few kinks to work out, so any community contributions would be awesome.

I especially would love to hear out any feature requests. Right now there are some props that react-native-keyboard-aware-scroll-view has that our library doesn't have, so if you need one of those you just can't use our library (yet).

I'd love to know which of those features people actually want so that we can get them added in.

The package isn't perfect, surely there are some issues and bugs that have yet to surface. But ultimately its implementation means it's just a lot easier to use and can provide a better developer experience than other solutions.

Other packages aren't going to "catch up", so to speak, so I think in this rare circumstance it might be time to start fresh.

Either way, thanks so much for your time. 😊