React native change ternary operator render to animation

Question

So I use a ternary operator to open and close a simple sidebar. But I want to change it to a tiny animation where the sidebar grows from the left side of the screen. This is my code right now:

  {isExpanded ?
    <View style={mainStyles.sidebar}>
      <View style={mainStyles.line}/>
      <Text style={mainStyles.sidebarText}>Add smth.:</Text>
      <TextInput
      placeholder="Add here"
      value={coursInput}
      onChangeText={textValue => {setCoursInput(textValue);}}
      onSubmitEditing={() => {if (!props.coursList.includes(coursInput)){props.setCoursList([...props.coursList, coursInput]);} setCoursInput('');}}
      style={mainStyles.coursInput}/>
      <View style={mainStyles.line}/>
      <Text style={mainStyles.sidebarText}>Your courses:</Text>
      <ScrollView style={mainStyles.coursScroll}>
        {props.coursList.map((item, key) => (
          <View key={key} style={mainStyles.infoBox}><Text style={mainStyles.kursTitle}>{item}</Text><TouchableOpacity style={mainStyles.deleteButton} onPress={() => deleteCourse(item)}><IconAnt name="delete" size={20}color={'#45b6fe'} /></TouchableOpacity></View>
        ))}
      </ScrollView>
    </View>
    :
    null
  }

Right now it is just simply opening and closing. But I want it to grow from 0% width to 110% how it is in my stylesheet right here:

  sidebar: {
    backgroundColor: '#333',
    padding: 10,
    width: '110%',
    height: '100%',
    position: 'absolute',
    paddingTop: '40%',
    elevation: 30,
  },

I tried to use animated but didn't found any good examples, so I thought maybe somone with experience can help me out.

React native change ternary operator render to animation

0 Answers0