How can i use a scrollview inside a view in react native

1
votes

how can i use a scrollview inside a view i tried to add a scrollview inside a view but it hides the icons Style

class HomeScreen extends Component {
    render()
    {
        return (
            <View style = {styles.container}>
                <View style= {styles.category}>
                    <ScrollView horizontal={true}>
                        <View style={styles.categoryIcons}  >
                            <Icon name="md-restaurant" size={35} color="#75DA8B">
                            </Icon>                               
                        </View>
                        <View style={styles.categoryIcons}>
                            <Icon name="md-fast-food" size={35} color="#75DA8B">
                            </Icon>  
                        </View>
                    </ScrollView>
                </View>
           </View>
          );
         }
        }

const styles = StyleSheet.create({ container: { height:'93%', width:'100%', },

    flexview:{
        flexDirection:'row',
        justifyContent:'space-between'
    }
})
1
react-nativescrollview

1 Answers

0
votes

import React, { Component } from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';

class App extends Component {
  render() {
    const { container, welcome, instructions } = styles;
    return (
      <View style={container}>
       <ScrollView style={[container, {flexDirection: 'row'}]} horizontal={true}>
        <Text style={welcome}>App</Text>
        <Text style={instructions}>To get started, edit App</Text>
        <View style={{ backgroundColor: 'red', width: '90%', justifyContent: 'center', alignSelf: 'center', height: 100, }}>
        </View>
       </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

export default App;