search

tachyons-css / react-native-style-tachyons

Better styling for React Native
Apache License 2.0
693 stars 51 forks source link

Warning Failed prop type : invalid prop `style` of type `array` supplied to Styled(text) expected object. #48

Closed maotora closed 7 years ago

maotora commented 7 years ago

Hello,

I keep getting this warning and none of the styles (from react-native-style-tachyons) work in my project.

"Warning Failed prop type : invalid prop style of type array supplied to Styled(text) expected object."

I also get another warning.

"Warning Failed prop type: invalid props.style key 0 supplied to Text.

Though, I usually get the second one when I use StyleSheet.create({}) to create my styles. And the first one is due to style={[array, arrayItem]} kind of styles.

I have followed the Usage guide on the README, when I try to console.log(s) I get a long object of styles as expected.

I've also used both cls and style methods. Both fail with both warnings.

I'm not sure why these warnings only apply on my setup.

Versions:

react-native-cli 2.0.1 react-native : 0.44.0

Thank you.

fab1an commented 7 years ago

Can you show one of your Views ?

maotora commented 7 years ago

Sure!

import React from 'react';
import NativeTachyons from 'react-native-style-tachyons';
import { Col, Spinner, Left, H3, Right, Body, Button, Icon, Content, List, ListItem, Text } from 'native-base';
const StudentProfile = props => {
    return (
        <Content>
            <List>
                <ListItem itemDivider>
                    <H3> General Results Overview </H3>
                </ListItem>

                <ListItem icon>
                    <Left>
                        <Text>
                            Name / Number :
                        </Text>
                    </Left>
                    <Body>
                        <Text cls="f5">
                            {rendering(student_name, student_number, school_number, examYear)}
                        </Text>
                    </Body>
                    <Right>
                        <Icon name="ios-person" />
                    </Right>
                </ListItem>
            </List>
        </Content>
    )
}

export default NativeTachyons.wrap(StudentProfile);

Inside Body

I also tried to apply it as style={[s.f5, s.pa2]} but that didn't work too with the same warnings..

fab1an commented 7 years ago

Thanks, i cannot reproduce this at the moment.

Please strip the view down to the bare minimum. (e.g. the <Text cls="f5"> directly inside <Content> and tell me whether that works.

Also check if it works when you remove the native-base component alltogether.

fab1an commented 7 years ago

This appears to be related to this bug: https://github.com/GeekyAnts/NativeBase/issues/22

maotora commented 7 years ago

Oh thanks! I see it now. I was a bit busy but that makes a lot of sense. But can't react-native-style-tachyons have support for plain style objects? Cause it doesn't look like native-base will make the change soon.

fab1an commented 7 years ago

I'm not sure what's the problem is yet. RNT has no knowledge of react-native actually, we don't use StyleSheet.create, we're just adding a plain object to the JSX.

Could you try the tests I described above?

maotora commented 7 years ago

Sure, I will give you feedback today. I've been on a tight schedule to deploy an application this week. Will make the tests today and give feedback.

fab1an commented 7 years ago

bump

maotora commented 7 years ago

It Works!

Made a fresh install as you recommended. Included native-base@2.3.1 & react-native-style-tachyons@3.4.2 and used both in my component.

And ...

Gotcha!

Code

import React, { Component } from 'react'
import { StyleSheet } from 'react-native'
import { Container, Text } from 'native-base'
import Dimensions from 'Dimensions'
import NativeTachyons from 'react-native-style-tachyons'

const { width } = Dimensions.get('window')
NativeTachyons.build({
    rem: width > 340 ? 18 : 14
}, StyleSheet)

class App extends Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <Container>
                <Text cls="f1">Waazaapp!!!</Text>
            </Container>
        )
    }
}

export default NativeTachyons.wrap(App)

Thanks a lot man!

fab1an commented 7 years ago

You're welcome.

bestengineer1112 commented 2 years ago

Hello