CODEWITHSUNDEEP
androidreact-nativestyling
user3833083
user3833083

Reputation: 305

Style Not Working Properly in React Native

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

  1. Border is not shown
  2. No top padding in first line
  3. The side scroller is centered

Rendered display

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

Upvotes: 1

Views: 3833

Answers (2)

user3833083
user3833083

Reputation: 305

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

Upvotes: 1

Kazuki Kimoto
Kazuki Kimoto

Reputation: 79

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')}>

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

  2. 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>

Upvotes: 0

Related Questions