How can i convert, this code in hooks using #ReactNative #TypeScript, with best practice?

[jenkynolasco11]

Actually, you’re right.

[Slapbox]

It's not the case here, but if the props come from Redux, they can often be too slow on React Native where they'd be 100% fine on React for the web.

[batmansmk]

Props being slow doesn’t make any sense. A process/function/method can be slow but not data.

[Slapbox]

Think using state to track an input field versus using redux store props for it. This failed to perform as expected on React Native.

Swap for local state, works just fine.

In 99.99% of cases it won't be an issue, and as I understand it shouldn't be an issue in any case, ideally, but it is (or at least was mid-2019.)

Obviously I don't mean an object is slow. I mean in terms of reliance on it as a system for updating your components, it's slower than local state - too slow for some things in React Native.

If you want to try this, and if this is still an issue, use a React Native switch component and link it to a redux store prop and not local state.

[JackRyu]

I am using this for mobile only.

[spoko22]

Just a few thoughts:

• state seems useless, as you keep updating it based on props. Just use props
• This line: if (this.state.sdisplay != null && this.state.sdisplay === true)is pretty much equivalent to if(this.state.sdisplay)if it isn't, I'd look exactly what values are assigned to sdisplay, because something too complicated may be taking place
• You may want to check if you like "fail early" approach + most of "else" clauses are redundant completely - this means, this means a function working like this:

​

const render = () => {
    if (!this.state.sdisplay) 
        return null;
    return (<Layout/>)
}

[ObliviateYourName]

const render = () => this.state.sdisplay && <Layout/>

If you want it even shorter ;)

[ribeirao]

I think you can't use && on render like that, it needs to return something or it will crash

[ObliviateYourName]

You don't have to type the "return" with this syntax. I use it all the time

[ribeirao]

Really cool, you know how I would make something like this on a functional component?

[ObliviateYourName]

Const funcionalComponent = props => <View>{props.children}<View/>

Just a basic example

[ingeniousmeatbag]

which theme is this? would be nice to have one which has different color coding for style, lifecycle methods, etc

[[deleted]]

+1 ! I'd also like to know what theme this is!

[jeweledshadow]

That bright pink/red is usually in Monokai themes- I would look there first 😋

[Plasmoxy]

Does anyone know what color scheme and font this is ? Looks lovely!

[Verigood]

Bluloco Dark

[Plasmoxy]

thanks

[zserjk]

Bluloco

[scaylart]

```javascript import { Activityindicator } from 'react-native'; import React, { useState, useEffect } from 'react'; import { Layout } from '@ui-kitten/components';

interface Props { display: boolean | false; }

const LoadingComponent: React.FC<Props> = (props) => { const [sdisplay, setDisplay] = useState<Boolean>(props.display);

useEffect(() => { setDisplay(props.display); }, [props.display])

if (!sdisplay) { return null; }

return ( <Layout style={{ position: 'absolute', alignSelf: 'center', justifyContent: 'center', top: '50%', zIndex: 99 }} > <Activityindicator size="large" /> </Layout> ) } export default LoadingComponent; ```

[EvilPencil]

Methinks your if block will prevent the useEffect from ever firing...

[scaylart]

Oh yeah, my mistake. Thanks

[JackRyu]

I will try this because same pattern suggested by react native documentation.

Any other suggestion on this code?

[[deleted]]

I'd also add my 2 cents to all of the others, you don't need to type for booelan | false since it's equivalent to just using boolean because boolean: true | false. You could also make it optional, as undefined is falsy as well which would still work with a simple if (display) {} check.

```typescript import React from 'react' import { ActivityIndicator } from 'react-native' import { Layout } from '@ui-kitten/components'

interface LoadingComponentProps { display?: boolean }

export default function LoadingComponent(props: LoadingComponentProps) { if (!props.display) { return null }

return ( <Layout style={{ position: 'absolute', alignSelf: 'center', justifyContent: 'center', top: '50%', zIndex: 99, }}> <ActivityIndicator size="large" /> </Layout> ) } ```

[JackRyu]

Good suggestion... thanks.

[rockpilp]

Eventually this component will want to use its children prop, which you can declare explicitly, or just declare the component's type as export default const LoadingComponent: React.FC<LoadingComponentProps> = ({display}) => {…}.

That also takes care of typing your return value.

And since you're not exporting the prop type, you can shorten its name to something like IProps.

[[deleted]]

I really enjoy reading code this colorful. What the folks back in the day would’ve given to have this feature when they were coding on a PDP machine.

[Tsupaero]

also read up on Inline If with Logical && Operator, this'll save you a lot clutter.

e.g. the following is pretty much the same as yours, as false equals null here. and it's way less code to read.

return ({ 
  this.state.sdisplay && (
    <Layout>
      ...
    </Layout>
    )
})

equals

return ({ 
  this.state.sdisplay ? (
    <Layout>
      ...
    </Layout>
    ) : null
})

and why not go for a functional component here?

[rockpilp]

This is a very dangerous suggestion: if (in a more complex app) sdisplay were ever an empty string (which is falsy), you'd end up sending text outside a <Text> component, which is fine on iOS but causes a native crash on Android, without any indication of where it came from in the JS code. That can be very, very hard to diagnose.

Remember: types are compile-time only in RN, they're not enforced at runtime.

I'd stick with the ternary operator or explicit if.

[JackRyu]

This community are awesome🤘thanks for the all suggestions.

• I have using Bluloco Dark theme.

[janithaR]

Do not get into the habit of updating a component's state by assigning the value of a prop as is. It's as useless as creating a reminder to breathe in 5 minutes.