Hide Show components in react native

Question

I m really new to React Native and I m wondering how can I hide show a component   Here s my test case    lt TextInput      onFocus  this showCancel         onChangeText   text    gt  this doSearch  input  text      gt      lt TouchableHighlight       onPress  this hideCancel    gt        lt View gt            lt Text style  styles cancelButtonText  gt Cancel lt  Text gt        lt  View gt    lt  TouchableHighlight gt     I have a TextInput component  what I want is to show the TouchableHighlight when the input gets the focus  then hide the TouchableHighlight when the user press the cancel button   I don  t know how to  quot access quot  the TouchableHighlight component in order to hide show it inside of my functions showCancel hideCancel   Also  how can I hide the button from the very beginning

User · Answer

i am just using below method to hide or view a button  hope it will help you  just updating status and adding hide css is enough for me  constructor props       super props         this state           visibleStatus  false         updateStatusOfVisibility         this setStatus         visibleStatus  true          hideCancel        this setStatus  visibleStatus  false       render       return       lt View gt           lt TextInput             onFocus  this showCancel                onChangeText   text    gt   this doSearch  input  text    this updateStatusOfVisibility       gt             lt TouchableHighlight style  this state visibleStatus   null     display   none                  onPress  this hideCancel    gt               lt View gt                   lt Text style  styles cancelButtonText  gt Cancel lt  Text gt               lt  View gt           lt  TouchableHighlight gt        lt  View gt

User · Answer

You can use a state to control wether the component is showing or not const  show  setShow    useState false      By default won t show     In return        show  amp  amp   lt ComponentName   gt        Use this to toggle the state  this could be in a function in the  main javascript or could be triggered by an onPress     show    true   setShow false    setShow true      Example  const triggerComponent        gt        show    true   setShow false    setShow true        Or  lt SomeComponent onPress       gt   show    true   setShow false    setShow true     gt

User · Answer

Actually  in iOS development by react-native when I use display   none  or something like below   const styles   StyleSheet create     disappearImage        width  0      height  0           The iOS doesn t load anything else of the Image component like onLoad or etc  so I decided to use something like below   const styles   StyleSheet create     disappearImage        width  1      height  1      position   absolute       top  -9000      opacity  0

User · Answer

I needed to switch between two images  With conditional switching between them there was 5sec delay with no image displayed   I m using approach from downvoted amos answer  Posting as new answer because it s hard to put code into comment with proper formatting   Render function    lt View style  styles logoWrapper  gt     lt Image     style   styles logo  loading   styles hidden            source  require    logo png      gt     lt Image     style   styles logo  loading        styles hidden       source  require    logo spin gif      gt   lt  View gt    Styles   var styles   StyleSheet create     logo        width  200      height  200         hidden        width  0      height  0

User · Answer

In react or react native the way component hide show or add remove does not work like in android or iOS  Most of us think there would be the similar strategy like  View hide   true or parentView addSubView childView    But the way react native work is completely different  The only way to achieve this kind of functionality is to include your component in your DOM or remove from DOM   Here in this example I am going set the visibility of text view based on the button click       The idea behind this task is the create a state variable called state having the initial value set to false  when the button click event happens then it value toggles  Now we will use this state variable during the creation of component   import renderIf from    renderIf   class FetchSample extends Component     constructor        super        this state          status false              toggleStatus        this setState         status  this state status             console log  toggle button handler     this state status          render         return          lt View style  styles container  gt           renderIf this state status              lt Text style  styles welcome  gt              I am dynamic text View            lt  Text gt                       lt TouchableHighlight onPress      gt this toggleStatus    gt             lt Text gt              touchme            lt  Text gt           lt  TouchableHighlight gt         lt  View gt                 the only one thing to notice in this snippet is renderIf which is actually a function which will return the component passed to it based on the boolean value passed to it     renderIf predicate  element       renderif js    use strict   const isFunction   input   gt  typeof input      function   export default predicate   gt  elemOrThunk   gt    predicate    isFunction elemOrThunk    elemOrThunk     elemOrThunk    null

User · Answer

constructor props        super props       this state           visible  true        declare visible false so by default modal   view are hide  example             this setState   visible   this state visible           Function call      this state visible    false            lt View gt               lt TouchableOpacity               onPress        gt  this example    gt       call function                            lt Text gt                              show view                            lt  Text gt               lt  TouchableOpacity gt    lt  View gt      lt View gt       lt TouchableOpacity               onPress        gt  this example    gt                             lt Text gt                              hide view                            lt  Text gt               lt  TouchableOpacity gt   lt  View gt

User · Answer

just use  style   width 0  height 0      to hide

User · Answer

The following example is coding in typescript with Hooks   import React    useState  useEffect   from  react              const App        gt        const  showScrollView  setShowScrollView    useState false                  const onPress        gt           toggle true or false     setShowScrollView  showScrollView                         lt  MapboxGL ShapeSource gt           lt View gt  showScrollView     lt DetailsScrollView   gt     null  lt  View gt         lt  MapboxGL MapView gt

User · Answer

I would do something like this   var myComponent   React createComponent        getInitialState  function              return               showCancel  false                         toggleCancel  function              this setState               showCancel   this state showCancel                         renderCancel  function              if  this state showCancel                return                    lt TouchableHighlight                      onPress  this toggleCancel    gt                       lt View gt                           lt Text style  styles cancelButtonText  gt Cancel lt  Text gt                       lt  View gt                   lt  TouchableHighlight gt                           else               return null                        render  function              return                lt TextInput                 onFocus  this toggleCancel                    onChangeText   text    gt  this doSearch  input  text      gt               this  renderCancel

User · Answer

You can use the conditions for show and hide the components constructor         super         this state           isVisible true               ToggleFunction        gt         this setState state   gt            isVisible   state isVisible                    render            return           lt View style  styles MainContainer  gt                    this state isVisible    lt Text style     fontSize  20  color   quot red quot   textAlign   center     gt  Hello World   lt  Text gt    null                 lt Button title  quot Toggle Visibility quot  onPress  this ToggleFunction    gt          lt  View gt

User · Answer

React Native s layout has the display property support  similar to CSS   Possible values  none and flex  default   https   facebook github io react-native docs layout-props display   lt View style   display   none    gt   lt  View gt

User · Answer

I had the same issue where I would want to show   hide Views  but I really didn t want the UI jumping around when things were added removed or necessarily to deal with re-rendering    I wrote a simple Component to deal with it for me  Animated by default  but easy to toggle  I put it on GitHub and NPM with a readme  but all the code is below   npm install --save react-native-hideable-view  import React    Component  PropTypes   from  react   import   Animated    from  react-native    class HideableView extends Component     constructor props        super props       this state           opacity  new Animated Value this props visible   1   0               animate show        const duration   this props duration   parseInt this props duration    500      Animated timing        this state opacity            toValue  show   1   0          duration   this props noAnimation   duration   0               start           shouldComponentUpdate nextProps        return this props visible     nextProps visible         componentWillUpdate nextProps  nextState        if  this props visible     nextProps visible          this animate nextProps visible                render         if  this props removeWhenHidden          return  this visible  amp  amp  this props children             return          lt Animated View style   opacity  this state opacity   gt           this props children         lt  Animated View gt               HideableView propTypes       visible  PropTypes bool isRequired    duration  PropTypes number    removeWhenHidden  PropTypes bool    noAnimation  PropTypes bool    export default HideableView

User · Answer

The only way to show or hide a component in react native is checking a value of a parameter of app state like state or props  I provided a complete example as below   import React   Component  from  react   import  View Text TextInput TouchableHighlight  from  react-native   class App extends Component        constructor props           super props           this state               show false                  showCancel     gt           this setState  show true               hideCancel     gt           this setState  show false               renderTouchableHighlight            if this state show              return                  lt TouchableHighlight                    style   borderColor  black  borderWidth 1 marginTop 20                      onPress  this hideCancel  gt                      lt View gt                          lt Text gt Cancel lt  Text gt                      lt  View gt                  lt  TouchableHighlight gt                                 return null             render               return                lt View style   justifyContent  center  alignItems  center  flex 1   gt                   lt TextInput                     style   borderColor  black  borderBottomWidth 1                       onFocus  this showCancel                    gt                   this renderTouchableHighlight                  lt  View gt                      export default App

User · Answer

You can use my module react-native-display to show hide components

User · Answer

in render   you can conditionally show the JSX or return null as in   render        return  yourCondition    lt yourComponent   gt    null

User · Answer

Hide And Show parent view of Activity Indicator   constructor props      super props     this state         isHidden  false            Hide and Show as Follow       this state isHidden     lt View style  style activityContainer  hide  false  gt  lt ActivityIndicator size  small  color   00ff00  animating  true   gt  lt  View gt    null     Full reference  render         return           lt View style  style mainViewStyle  gt             lt View style  style signinStyle  gt              lt TextField placeholder  First Name  keyboardType  default  onChangeFirstName   text    gt  this setState  firstName  text text     gt              lt TextField placeholder  Last Name  keyboardType  default  onChangeFirstName   text    gt  this setState  lastName  text text     gt              lt TextField placeholder  Email  keyboardType  email-address  onChangeFirstName   text    gt  this setState  email  text text     gt              lt TextField placeholder  Phone Number  keyboardType  phone-pad  onChangeFirstName   text    gt  this setState  phone  text text     gt              lt TextField placeholder  Password  secureTextEntry  true  keyboardType  default  onChangeFirstName   text    gt  this setState  password  text text     gt              lt Button  style  AppStyleSheet buttonStyle  title  Sign up  onPress       gt  this onSignupPress    color  red  backgroundColor  black   gt             lt  View gt                          this state isHidden     lt View style  style activityContainer  gt  lt ActivityIndicator size  small  color   00ff00  animating  true   gt  lt  View gt    null                    lt  View gt            On Button presss set state as follow  onSignupPress       this setState  isHidden  true       When you need to hide   this setState  isHidden  false

User · Answer

If you need the component to remain loaded but hidden you can set the opacity to 0   I needed this for expo camera for instance      in constructor     this state    opacity  100    in component style     opacity  this state opacity      when you want to hide this setState  opacity  0

User · Answer

Most of the time i m doing something like this    class MyComponent extends React Component     constructor props        super props       this state    isHidden  false       this onPress   this onPress bind this         onPress         this setState  isHidden   this state isHidden         render         return          lt View style  styles myStyle  gt            this state isHidden    lt ToHideAndShowComponent  gt    null            lt Button title  this state isHidden    SHOW     HIDE   onPress  this onPress    gt         lt  View gt                 If you re kind of new to programming  this line must be strange to you     this state isHidden    lt ToHideAndShowComponent  gt    null    This line is equivalent to  if  this state isHidden      return    lt ToHideAndShowComponent  gt       else     return null      But you can t write an if else condition in JSX content  e g  the return   part of a render function  so you ll have to use this notation   This little trick can be very useful in many cases and I suggest you to use it in your developments because you can quickly check a condition   Regards

User · Answer

checkincheckout        gt            this setState   visible   this state visible       render             return    this state visible    false            lt View style    alignItems   center   flexDirection   row   marginTop  50    gt            lt View style    flex  1  alignItems   center   flexDirection   column     gt                lt TouchableOpacity onPress       gt  this checkincheckout    gt                    lt Text style    color   white     gt Click to Check in lt  Text gt                lt  TouchableOpacity gt            lt  View gt        lt  View gt     lt View style    alignItems   center   flexDirection   row   marginTop  50    gt    lt View style    flex  1  alignItems   center   flexDirection   column     gt       lt TouchableOpacity onPress       gt  this checkincheckout    gt            lt Text style    color   white     gt Click to Check out lt  Text gt        lt  TouchableOpacity gt    lt  View gt    lt  View gt             thats all  enjoy your coding

User · Answer

Just simply use this because I wanted to use the  quot useRef quot  conditions were not an option for me  You can use this suppose when you want to use useRef hook and press the button      lt Button       ref  uploadbtn        buttonStyle    width  0  height  0  opacity  0  display   quot none quot           onPress  pickImage        gt

User · Answer

An additional option is to apply absolute positioning via styling  setting the hidden component in out-of-screen coordinates    lt TextInput     onFocus  this showCancel        onChangeText   text    gt  this doSearch  input  text        style  this state hide    position   absolute   top  -200          gt    Unlike in some of the previous suggestions  this would hide your component from view BUT will also render it  keep it in the DOM   thus making it truly invisible

User · Answer

I solve this problem like this    lt View style    display  stateLoad    none    undefined      gt

User · Answer

If you want to hide it but keep the space occupied by the component like css s visibility  hidden setting in the component s style opacity  0 should do the trick    Depending on the component other steps in disabling the functionality might be required as interaction with an invisible item is possible

User · Answer

In your render function     this state showTheThing  amp  amp      lt TextInput  gt      Then just do   this setState  showTheThing  true       to show it   this setState  showTheThing  false      to hide it

User · Answer

Very Easy  Just change to       this showCancel   like below      lt TextInput         onFocus       gt  this showCancel             onChangeText   text    gt  this doSearch  input  text      gt    lt TouchableHighlight      onPress  this hideCancel    gt       lt View gt           lt Text style  styles cancelButtonText  gt Cancel lt  Text gt       lt  View gt   lt  TouchableHighlight gt

User · Answer

I would vouch for using the opacity-method if you do not want to remove the component from your page  e g  hiding a WebView   lt WebView    style   opacity  0      Hide component    source   uri   https   www google com        gt   This is useful if you need to submit a form to a 3rd party website

[javascript] Hide/Show components in react native

Examples related to javascript

Examples related to react-native

Examples related to higher-order-components