React native change ternary operator render to animation

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.