Skip to main content

Featured post

How to Insert line break in Text component in React Native

Hi, I was developing an application in react native.I have to handle lots of text data in this small react native application.I have used  Text component in react native many times. While working on this application,i had a requirement to display some text content with line breaks.I will explain it clearly with an example.I want to display a text as shown below  Welcome Please subscribe my channel I wrote react native code as shown below <View> <Text> Welcome Please subscribe my channel </Text> <View> When i run these lines of code,It will display text as shown below Welcome Please subscribe my channel   - instead of displaying in two lines with line break,it displays in a single line.So i have to find a solution to insert line break in Text component in React Native.After lots of research,i found a clean solution as shown below <View> <Text> Welcome{"\n"} Please subscribe my channel </Text> <View> Here ...
Read more
Labels

How to hide keyboard in react native Keyboard.dismiss()

Hi friends,




I was working with my react native project one year ago.In one of the app screen i had a textInput to enter the address/ mobile no.After entering the address/mobile no,i have to dismiss/hide the keyboard in react native .I faced difficulties to implement the react native code for dismiss the keyboard.

Actually my requirement is to dismiss/hide the keyboard on completion of entering the text data in textInput.When i click outside the keyboard area,it should be dismissed.I tried many ways to implement the feature.Unfortunately i couldn't find any solution.

After more research,i found a better solution.So in this article,i will explain how we can dismiss/hide the keyboard by clicking outside area.


Step -1 


Import TouchableWithoutFeedback and Keyboard from react native

 

Step -2


Wrap the View within the TouchableWithoutFeedback component 


Step -3


Define onPress inside TouchableWithoutFeedback as shown below


<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>

    <View style={{flex: 1}}>

        ----------------------

        ----------------------

    </View>

</TouchableWithoutFeedback>



So by using TouchableWithoutFeedback and Keyboard components, we can easily hide or dismiss keyboard by clicking on the screen,outside area of keyboard,in react native way.This way of implementing reduces the number of code lines and provide better readability 


I share my experience with you.It may help you

 

Thanks



Labels: