React native - Facebook UI - SearchBar

[@masterwayne9790]

Thanks for this, I was searching for expanded search bar

[@keithmanning6564]

good thing you put a comment about importing react, otherwise I wouldn't have known what you were doing!

[@deshanmadurajith3995]

Keep It Up... Nice work. Also Nice Background Music.

[@bug2star219]

Thanks! :)

[@AsadAli-gb3tz]

it is giving error on android NoopNode cannot be cast to ClockNode

[@vineelkumar5253]

Try to import Animated from react native not from react native reanimated package. Will solve the problem

[@shehzadaslam4302]

Great Work

[@bug2star219]

Thank you Shehzad!

[@abdeldjabarahmeidi7097]

Thank you, but the source code link is not working

[@abdulbasit_64]

Great content!

[@clintonngotta]

great tutorial.. very helpful

[@dioritbajrami8283]

On Android it wont work right, since the Search Bar will just vanish after the click on the Search Icon

[@anhquannguyen5111]

Great work. Thank you so much.

[@rodrigomendoza1060]

solution when textinput disappears, import useRef and add it in your animation variables, example: const _input_box_translate_x = useRef (new Value (width)). current; I hope it works :)

[@FalconLover5xX]

Helped a lot thanks :D

[@julielesage960]

thank you Rodrigo !

[@MalikFaizanHeatstoler]

can you please share the perfect source code

[@rodrigomendoza1060]

@@MalikFaizanHeatstoler Sure, I must say that it is not perfect, I recommend that you check the react documentation

[@nikhilyadav945]

can you share the source code

[@eliasmoreno4672]

why isn't this in a github repository??? The link provided doesn't go anywhere. pls fix

[@karmanimohamedamine6058]

@Bug2Star Same problem when I test your code. I don't use clock, and i'm still facing this issue with a downgrade version of react-native-reanimated (v1.10.0). Now, I'm on a 1.13.2 version and still not work. Can you check to the problem please and tell me what changes I need to do on your code ? Thank you in advance !

[@unbekannt8926]

How can I get the images and texts from a facebook post to my app?

[@KhanhDuy-dv2ub]

I could use it with react hook but when i test the app in Android Emulator. After clicking seach button, the text input is not visible but i still can type. Any problems with android platform ? Please check this

[@bug2star219]

Maybe you have not correctly connected the state to the input component

[@KhanhDuy-dv2ub]

@@bug2star219 i don't think so. Because the code is the same. When i run it on IOS emulator ( xcode ), it works. But when i run it on Android emulator, the text input doesn't show :(

[@bug2star219]

i ve not tested on android but, maybe you can add "elevation" property within "zIndex"

[@KhanhDuy-dv2ub]

@@bug2star219 I added "elevation" and see the text input then. But cannot click back button and focus text input for second time. IOS still work normally with the same code =((

[@rodrigomendoza1060]

hi Khanh Duy, did you find a solution?

[@periklisrips4355]

Hi, thanks for the video. I found the problem for which we get "NoopNode cannot be cast to ClockNode". The problem is the duration (11:24) in: const content_traslate_y_config = { duration: 0 ... } Apparently, a duration of 0 somehow translates to a NoopNode. When I changed that to 200, it magically worked! Not sure if something has changed in reanimation v2.x and it was allowed before, but it's not allowed now.

[@vineelkumar5253]

Try to import Animated from react native not from react native reanimated package. Will solve the problem

[@masterwayne9790]

Source code link isn't working can you provide some alternate link

[@mosesegboh]

Hello, the link to your source code is not working. Kindly check it out

[@sdsim1]

thanks

[@KhanhDuy-dv2ub]

hi ! I have a problem when using this code with react hook and arrow function. When i type a first single text, it blurs immediately. Can you show me a version of react hook ? So many tks

[@anhquannguyen5111]

Same problem here, actually the input doesn't blur since the keyboard still appears. I see the issue that is the onChangeText re-render and reset the style of the translateX to initial value everytime you type... Any helps please? Thanks in advance

[@KhanhDuy-dv2ub]

@@anhquannguyen5111 so sad =((

[@anhquannguyen5111]

@@KhanhDuy-dv2ub So you can just create a new class component and then import the searchbar to your screen :D. It works well

[@KhanhDuy-dv2ub]

@@anhquannguyen5111 lol :D i don't think it's a good solution

[@charlesaondo5464]

@@KhanhDuy-dv2ub can you share the code on how you achieve this using hooks and arrow function, thank you kindly

[@shehabmind4481]

the source code link isnt working can you help ?

[@CriticManiaInZeWorld]

Can someone give me a github link plz

[@adarshjaiswal7334]

Bro, why had you discontinued to upload videos. You are awesome. If you keep uploading your videos will be definitely be trending among the react-native community.

[@bug2star219]

I had to work on a very big project and surely the pandemic didn't help me to have more free time, but new videos are coming soon using react hooks! stay connected 💪🏻

[@eliasmoreno4672]

where is the code to this??

[@chauphan3221]

My friend or make a watch video of facebook

[@corybunge5209]

Great work! Source code?

[@bug2star219]

Thanks! I'm working on it, soon I will put the source codes online and update the video description with the link :)

[@corybunge5209]

Bug2Star appreciate it thank you

[@bug2star219]

@@corybunge5209 Source code is now available online here bug2star.com/post/1/react-native-facebook-ui-search-bar

[@corybunge5209]

Bug2Star amazing !! Thank you!

[@corybunge5209]

Bug2Star is there a better way to get in touch with you? Are you on any other social media?