Failed prop type?

[RyanKeepRunning]

Hi,
I got this warning while implementing a simple masonry using react-native-masonry. Did anyone encounter this warning as well? How could I fix it?

Warning: Failed prop type: Invalid prop defaultComponent of type object supplied to Injector, expected function.
in Injector (at Brick.js:40)
in Brick (at Column.js:112)
in RCTView (at View.js:44)
in CellRenderer (at VirtualizedList.js:687)
in RCTScrollContentView (at ScrollView.js:852)
in RCTScrollView (at ScrollView.js:977)
in ScrollView (at VirtualizedList.js:1062)
in VirtualizedList (at FlatList.js:662)
in FlatList (at Column.js:130)
in RCTView (at View.js:44)
in Column (at Masonry.js:209)
in StaticRenderer (at ListView.js:456)
in RCTScrollContentView (at ScrollView.js:852)
in RCTScrollView (at ScrollView.js:977)
in ScrollView (at ListView.js:324)
in ListView (at Masonry.js:200)
in RCTView (at View.js:44)
in Masonry (at Gallery.js:68)
in RCTView (at View.js:44)
in Gallery (created by SceneView)
in SceneView (at StackViewLayout.js:795)
in RCTView (at View.js:44)
in AnimatedComponent (at StackViewCard.js:69)
in RCTView (at View.js:44)
in AnimatedComponent (at screens.native.js:59)
in Screen (at StackViewCard.js:57)
in Card (at createPointerEventsContainer.js:27)
in Container (at StackViewLayout.js:860)
in RCTView (at View.js:44)
in ScreenContainer (at StackViewLayout.js:311)
in RCTView (at View.js:44)
in AnimatedComponent (at StackViewLayout.js:307)
in Handler (at StackViewLayout.js:300)
in StackViewLayout (at withOrientation.js:30)
in withOrientation (at StackView.js:79)
in RCTView (at View.js:44)
in Transitioner (at StackView.js:22)
in StackView (created by Navigator)
in Navigator (at createKeyboardAwareNavigator.js:12)
in KeyboardAwareNavigator (created by SceneView)
in SceneView (at createTabNavigator.js:39)
in RCTView (at View.js:44)
in RCTView (at View.js:44)
in ResourceSavingScene (at createBottomTabNavigator.js:113)
in RCTView (at View.js:44)
in ScreenContainer (at createBottomTabNavigator.js:103)
in RCTView (at View.js:44)
in TabNavigationView (at createTabNavigator.js:197)
in NavigationView (created by Navigator)
in Navigator (at createAppContainer.js:388)
in NavigationContainer (at withExpoRoot.js:22)
in RootErrorBoundary (at withExpoRoot.js:21)
in ExpoRootComponent (at renderApplication.js:34)
in RCTView (at View.js:44)
in RCTView (at View.js:44)
in AppContainer (at renderApplication.js:33)

[brh55]

Can I see how you are invoking the Masonry component, along with your dataset?

[RyanKeepRunning]

Thanks for the quick response brh55,

Since I'm still working on the frontend, I simply created some fake data following the structure shown in README.

The code is as follows:

class Gallery extends Component{
constructor(props){
super(props);
this.state= {
galleryList:[]
}
}
static navigationOptions = { header: null }

async componentDidMount(){
    const galleryList = [
        {data:{name:"Will Smith",similarity:"60%"},uri:"http://www.gstatic.com/tv/thumb/persons/1650/1650_v9_ba.jpg"},
        {data:{name:"Pikachu",similarity:"50%"},uri:"http://p1.pstatp.com/large/212f000013ad64823987"},
    ];

    galleryList.map(function(item,index){ // Add key and renderFooter function to bricks.
        item.key = index;
        item.renderFooter = (data) =>{
            return(
            <View style={styles.item}>
                <Text style={styles.name}>{data.name}</Text>
                <Text style={styles.name}>{data.similarity}</Text>
                <Text style={styles.name}>similarity</Text>
            </View>)
        }
    })

    this.setState({galleryList});
}

render(){
    return(
        <View style={styles.container}>
            <Masonry
                columns={4} 
                bricks={this.state.galleryList}
                spacing= {3}
            />
        </View>
    )
}

}
export default Gallery;

[brh55]

@RyanKeepRunning .map doesn't mutate the exisitng array, you'll need to set it into it's own variable, or reassign. Still don't think this would necessarily fix your issue since you still wouldn't be using custom components without your mapping, but let's start with there.

    var galleryList = [
        {data:{name:"Will Smith",similarity:"60%"},uri:"http://www.gstatic.com/tv/thumb/persons/1650/1650_v9_ba.jpg"},
        {data:{name:"Pikachu",similarity:"50%"},uri:"http://p1.pstatp.com/large/212f000013ad64823987"},
    ];

    galleryList = galleryList.map(function(item,index){ // Add key and renderFooter function to bricks.
        item.key = index;
        item.renderFooter = (data) =>{
            return(
            <View style={styles.item}>
                <Text style={styles.name}>{data.name}</Text>
                <Text style={styles.name}>{data.similarity}</Text>
                <Text style={styles.name}>similarity</Text>
            </View>)
        }
    })

    this.setState({galleryList});
}

[RyanKeepRunning]

Thanks for the suggestion brh55. I did make a stupid mistake here. However, after modifying my code accordingly, I found I'm still triggering the same warning (using expo). Then I deleted almost everything to make the code exactly the same as the instruction in README, the warning still exists. Are there any problems with defaultComponent and Injector?

The code is shown below. I can't find any difference between the current code and the given example.

`
import React,{Component} from 'react';
import {
StyleSheet,
Text,
View,
} from 'react-native';
import Masonry from 'react-native-masonry';

class Gallery extends Component{
constructor(props){
super(props);
}
static navigationOptions = { header: null }
async componentDidMount(){

}

render(){
    var galleryList = [
        {
            data:{
                caption:"Will Smith"
            },
            uri:"http://www.gstatic.com/tv/thumb/persons/1650/1650_v9_ba.jpg",
            renderFooter:(data)=>{
                return(
                    <View style={styles.item}>
                        <Text style={styles.name}>{data.caption}</Text>
                    </View>
                );
            }
        },
    ];
    return(
        <View style={styles.container}>
            <Masonry
                columns={3} // optional - Default: 2
                bricks={galleryList}
                spacing= {3}
            />
        </View>
    )
}

}

const styles = StyleSheet.create({
container:{
flex:1,
backgroundColor:'#c0e2f7',
padding:10
},
item:{
backgroundColor: 'white',
padding: 3,
paddingRight: 4,
paddingLeft: 4,
alignItems: 'center',
}
,
name:{
lineHeight: 20,
fontSize: 16,
}
});

export default Gallery;
`

[brh55]

@RyanKeepRunning Yeah I figured that wouldn't fix the warning, but at least we have the masonry rendering for you.

For the warning, it seems the injector is getting complaints with the prop type, so I'll update the dependency and bump minor version.

[RyanKeepRunning]

Thank you so much for your help. Looking forward to the updated version.

[brh55]

Hey @RyanKeepRunning ,

Try pulling in the latest and see if this keeps the warnings at bay.

[RyanKeepRunning]

Now I'm running my application on Android, and I got this error when I tried to run this very basic example.

`import React,{Component} from 'react';
import {
StyleSheet,
View,
} from 'react-native';
import Masonry from 'react-native-masonry';

class Gallery extends Component{
constructor(props){
super(props);
}
static navigationOptions = { header: null }
async componentDidMount(){
}

render(){
    let galleryList=[
        {uri:"http://p1.pstatp.com/large/212f000013ad64823987"}
    ];
    return(
        <View>
            <Masonry
                columns={4}
                bricks={galleryList}
                spacing= {3}
            />
        </View>
    )
}

}

export default Gallery;`

[RyanKeepRunning]

I also saw the same issue in another thread, does android app need extra configuration in order to use react-native-masonry?

#105

[brh55]

Sorry been trying to set up my Android environment but running through several issues that keep burning through my patience. Honestly, I don't get to allocate too much time on this project as I would like due to other personal constraints and other projects, but hoping we can get some other contributors to help out.