0

I searched how to set footer using React Native. and I found a solution

https://stackoverflow.com/a/31249011/8226957

I followed and put style={{flex: 1}} to root View, but it does not work.

<View style={{flex: 1}}>
    <ScrollView>
        <FlatList
            data={this.state.datas}
            renderItem={({item}) =>
                <TouchableOpacity onPress={() => {this._deleteKeyFromAsyncStorage(item.key)}}>
                    <Text style={styles.item}>
                        {item.value}
                    </Text>
                </TouchableOpacity>
            }
        />
    </ScrollView>
    <View>
        <TextInput
            style={{height: 40, borderColor: 'gray', borderWidth: 1}}
            onChangeText={(text) => this.setState({text})}
            value={this.state.text}
        />
        <TouchableOpacity onPress={this._onAddButton}>
            <View style={{
                height: 50,
                backgroundColor: 'steelblue',
                alignItems: 'center',
                justifyContent: 'center',
            }}>
                <Text style={{textAlign: 'auto'}}>ADD</Text>
            </View>
        </TouchableOpacity>
    </View>
</View>

when I follow that, I see disappeared List.

Cœur
  • 37,241
  • 25
  • 195
  • 267
이혜란
  • 1
  • can you add a quick sketch of what you want it to look like? or an example from another app – Ryan Turnbull Sep 25 '17 at 23:10
  • @RyanTurnbull I want textInput and Button (footer) are fixed at the bottom of screen. https://i.stack.imgur.com/MnheG.png (like this) – 이혜란 Sep 26 '17 at 14:42

2 Answers2

0

Try to add justifyContent : 'space-between' and add flexDirection: 'column' that should be fix your problem

<View style={{flex: 1, flexDirection: 'column', justifyContent: 'space-between'}}>
Maulana Prambadi
  • 1,015
  • 9
  • 7
0

Try to wrap the <ScrollView> in a <View style={{ flex: 1 }}>

If that does not work, try to set a fixed height too your footer: <View style={{ height: 90 }}>

Appfred
  • 103
  • 7