Style Not Working Properly in React Native

Question

I'm following a tutorial to develop an android app using react native but there're some weird styling issues

Border is not shown
No top padding in first line
The side scroller is centered

this is my code:

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

class SimpleList extends Component {
    constructor(props) {
        super(props);

        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSource: ds.cloneWithRows(['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'])
        };
    }

    _renderRow(rowData) {
        return <Text style={styles.row}>{rowData}</Text>
    }

    render() {
        return (<View style={styles.container}>
            <ListView
                dataSource={this.state.dataSource}
                renderRow={(e) => this._renderRow(e)}/>
        </View>);
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  },
  row: {
    flex: 1,
    fontSize: 24,
    padding: 42,
    borderWidth: 1,
    borderColor: '#DDDDDD'
  }
});

export default SimpleList;

my react native version is 0.30

user3833083 · Accepted Answer · 2016-07-25 08:35:02Z

1

I think I've figured it out

Top Padding and Border is not working for Text component, it works when I wrapped the Text with View component, and style the wrapper instead
Fixed the scroller by using contentContainerStyle instead of style property to define style

don't know why it works in the tutorial though

edited Jul 25, 2016 at 8:35

answered Jul 23, 2016 at 17:18

user3833083

3056 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kazuki Kimoto · Accepted Answer · 2016-07-22 20:12:44Z

0

for border u can just create function:

border: function(color) {
return {
borderColor: color,
borderWidth: 4
    }
}

you can use like this:

<View style={this.border('green')}>

to adjust height, u can just use, marginTop or marginBottom

you can just use ScrollView like this(make sure import ScrollView)

<ScrollView>
<Text style={{fontSize:96}}>Scroll me plz</Text>
<Image source={require('./img/favicon.png')} />
</ScrollView>

answered Jul 22, 2016 at 20:12

Kazuki Kimoto

791 gold badge3 silver badges10 bronze badges

Collectives™ on Stack Overflow

Style Not Working Properly in React Native

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related