React Native | text highlighting - react-native

I am working on a react native app.
in one page of it I wan't to make a highlighting option like the following picture
but I can't customize the text popover to reach this behavior,
after many trials I reached the following result
Any idea how to add highlighting functionality?

Try using react-native-highlight-words library . Might be it solves your problem

Just use a webview and use the injectedJavaScript prop

Related

React Native Line chart animation

Is there any way to build this kind of behavior in react native (any chart library)
here I attached a sample gif file
You can check this line chart module of react native svg charts. Do let me know if this helps :)
rn-svg-chart
Try react-native-gifted-charts
The above chart can be easily created using this library.
Here's a very similar chart explained in the library's official documentation. You need to scroll down to near bottom of the page to find this chart.

Unknown event handler property 'onTextLayout'

I've looked it up on reactnative.dev, and the Text component is supposed to have an 'onTextLayout' prop.
I'm running the React Native version 0.62.2, and the documentation on their site says it applies for 0.62. However, when I try to use the prop in a Text component, I am shown this message:
I need to use this prop to detect when the text starts overflowing into two lines. If anyone has another solution of how I can accomplish this without onTextLayout, that would also be very helpful.
It appears it's not working on react-native-web
http://necolas.github.io/react-native-web/docs/?path=/docs/components-text--children
Just test your app on android/iOS and you will be fine

Nooby question for a splash screen in React Native

Trying to make a splash screen for my react native app using this guide: https://medium.com/#appstud/add-a-splash-screen-to-a-react-native-app-810492e773f9
Trying to type this code in: Code image
and I'm getting errors. Could someone please explain what the "create:" and "inputs:" mean and why they're grayed out?
Thanks
They are the explanation of the code parts. You put the inputs where it says inputs. Create is the block that you put your code that you want effect to trigger. You can read the documentation about the react hooks so you will have a better grasp before you try to jump into using them; React hooks

How to show images and text using react-native-material-dropdown?

I'm developing social app using react-native.
There, I have one problm during developing.
I used react-native-material-dropdown module for making dropdown.
I want to show images and text on each element on dropdown.
But react-native-material-dropdown module doesn't support this feature.
How can I solve this problem?
Please help me.
Try using the renderBase prop, see this and this issues that could help you :)

Drawer / hamburger menu in React Native

I need to create an app using react native in both android and iOS and i'm still a newbie. So,now i need to implement a drawer like shown in the image above.I've already searched for an example or project that meets with my needs but too badly, i couldn't find anything suitable for me.So can you help me and thank you
http://2.bp.blogspot.com/-1_Fi6T2l1LY/VUfHyQlwenI/AAAAAAAAC8g/wkWN42gNaDw/s320/device-2015-05-04-101820_1.gif
You could use this library:
https://github.com/react-native-material-design/react-native-material-design
I think it can solve your problem
This RN starter has an example as well:
https://github.com/infinitered/ignite
You should not implement it from scratch yourself but instead you can use a starter project like this. If you want these animations on the drawer icon you can also check the Airbnb's Lottie.
How to implement the hamburger menu with react-native-paper:
https://callstack.github.io/react-native-paper/integrate-app-bar-with-react-navigation.html
https://medium.com/#mdeepikayadav029/side-menu-bar-after-login-screen-in-react-native-4cabee7ca2b0
At the time, this one worked for me (0.63.4). The others I found were from previous versions (0.45) and required a lot of adjustments regarding newer version implementations. No other extra files are needed except these ones after creating a unmanaged blank project:
App.js
LoginScreen.js
HeaderComponent.js
FirstScreen.js
SecondScreen.js