I want to use MasonryList component in my react native project.
So i created a component like this below:
import React, {Component} from 'react';
import {Image, StyleSheet, View, TouchableOpacity, Alert} from 'react-native';
import MasonryList from 'react-native-masonry-list';
import {books} from '../assets';
class Books extends Component {
render() {
return (
<View style={styles.container}>
<MasonryList source={[{
uri: '...'
}]} />
</View>
);
}
}
so, "uri" prop expects a link for a single image, if you want to use multiple images you should have a structure like this.
{ uri: "link" }, {uri: "link2"}, {uri: "link3" }
and so on...
I have imported the books, so my question is how can i loop in the components itself, to reach each element's "thumbnail" to get the url on the structure below?
my books.js file structure is like:
export default {
items: [
{
kind: "books#volume",
id: "md5"
volumeInfo: {
imageLinks: {
thumbnail: "
Simply i could do mapping in the render function and create MasonryList component but that would create the component as much as the loop counts. I want only 1 component and multiple uri links in it.
You can use a state array in "source" prop and in componentDidMount or at any relevant location, set this state using map function.
import React, {Component} from 'react';
import {Image, StyleSheet, View, TouchableOpacity, Alert} from 'react-native';
import MasonryList from 'react-native-masonry-list';
import {books} from '../assets';
class Books extends Component {
constructor(props){
super(props);
this.state={
imageArray: [],
}
}
componentDidMount(){
var imageArray = [];
books.map(book =>{
imageArray.push({uri: book.volumeInfo.imageLinks.thumbnail})
});
this.setState({imageArray});
}
render() {
const {imageArray} = this.state;
return (
<View style={styles.container}>
<MasonryList source={imageArray} />
</View>
);
}
}
Related
Cannot get any output from my function test() which I have written in Boxes.js when I add onPress={test} to my View tag in Dice.js.
I have tried to add test() on tags like Text, then it works, but not when I put it on the View tag.
Boxes.js:
import react from "react";
import { StyleSheet, Text, View, Image } from "react-native";
import Dice from "./Dice";
import PatternDivider from "./PatternDivider";
export function test() {
console.log("hi");
}
export default class Boxes extends react.Component {
render() {
return (
<View style={styles.box}>
<Text style={styles.header}>Advice #117</Text>
<Text style={styles.advice}>
It is easy to sit up and take notice, what's difficult is getting uu
and taking action
</Text>
<PatternDivider />
<Dice />
</View>
);
}
}
Dice.js:
import react from "react";
import { StyleSheet, Text, View, Image } from "react-native";
import { test } from "./Boxes";
export default class Dice extends react.Component {
render() {
return (
<View style={styles.circle} onPress={test}>
<Image
source={require("../assets/icon-dice.png")}
style={styles.dice}
/>
</View>
);
}
}
If you wanna Dice to be clickable, use one the components that handles press events, like Pressable. Not all components accept an onPress property, View is one of them.
import react from "react";
import { StyleSheet, Text, View, Image, Pressable } from "react-native";
import { test } from "./Boxes";
export default class Dice extends react.Component {
render() {
return (
<Pressable style={styles.circle} onPress={test}>
<Image
source={require("../assets/icon-dice.png")}
style={styles.dice}
/>
</Pressable>
);
}
}
React Native's View component doesn't have an onPress property https://reactnative.dev/docs/view
I have a simple container component that should handle some logic at some point:
import React, {Component} from 'react';
import {Text, View, Button, Image} from 'react-native';
import Title from '../Presentational/Title';
class AppList extends React.Component {
render() {
return (
<Title titleProperty={'To Do Something'}></Title>
);
}
}
export default AppList;
I try to pass some props to a Title component so that component would display them:
import React, {Component} from 'react'
import {View, Text, StyleSheet} from 'react-native'
export default class Title extends React.Component {
render() {
const {children} = this.props.titleProperty;
return (
<View style = {styles.header}>
<Text style={styles.title}>{children}</Text>
</View>
)
}
}
const styles = StyleSheet.create({
header: {
backgroundColor: 'skyblue',
padding: 15,
},
title: {
textAlign: 'center',
color: 'white',
},
})
The result I'm getting is a blue bar without any text
imgur link
Why is it not working?
The reason it is not working is because in Title.js you are trying to get value of titleProperty incorrectly.
const {children} = this.props.titleProperty; implies that you want to store value of this.props.titleProperty.children inside children constant.
what you should do is read value of titleProperty and then it will it display correctly in your component.
You can do this in various ways, few of them are listed below
const children = this.props.titleProperty;
const { titleProperty } = this.props;
In the first option you can read titleProperty from props and assign it to any named variable you want. In the later option it will read the value of key from this.props and only assign the value of key is present otherwise undefined
Find output here
The problem is this line:
const {children} = this.props.titleProperty;
In this way you're trying to deconstruct the titleProperty which should be an object and should have the children property.
More about destructuring on MDN
I am not sure if you are confused with the children props of React, in this case I recommend you to read this answer: https://stackoverflow.com/a/49706920/9013688
So I am trying to render my Firebase Database onto my Android simulator and it is showing an error, in which the solution is to convert an object into an array, but I do not know-how.
import _ from 'lodash';
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {FlatList, View, Text} from 'react-native';
import {employeesFetch} from '../actions';
import ListItem from './ListItem';
class EmployeeList extends Component {
componentDidMount(){
this.props.employeesFetch();
}
renderRow(employee) {
return <ListItem employee={employee}/>;
};
render(){
console.log(this.props.employees);
return (
<View>
<FlatList
data={Object.keys(this.props.employees)}
renderItem={this.renderRow}
/>
</View>
);
}
}
const mapStateToProps = state => {
const employees = _.map(state.employees, (val, uid) => {
return { ...val, uid };
});
return { employees };
};
export default connect(mapStateToProps, { employeesFetch })(EmployeeList);
That mapStateToProps helper is supposed to create a variable called employees (if I am not wrong, I am just learning to code) but when I write that down like this:
<FlatList
data=employees
renderItem={this.renderRow}
/>
It says that employees is not defined. Just in case, I will add the ListItem file to show what I have done there.
import React, {Component} from 'react';
import {Text} from 'react-native';
import {CardSection} from './common';
class ListItem extends Component {
render () {
const { name } = this.props.employee;
return (
<CardSection>
<Text style={styles.titleStyle}>
{name}
</Text>
</CardSection>
);
}
}
export default ListItem;
I expect the output to be a list showing the employees (recorded in Firebase Database) on the screen, but is showing an error: Invariant Violation: Objects are not valid as a React child (found: object with keys {name, phone, shift, uid}). If you meant to render a collection of children, use an array instead.
Need to set Login page as my rootview and used code. if i use the login page details in app.js file getting the result but tried to import login.js in app.js file its not working
import React, {Component} from 'react';
import { StyleSheet,
NavigatorIOS,} from 'react-native';
import LoginPage from './src/pages/Login';
type Props = {};
export default class App extends Component<{}> {
render() {
return (
<NavigatorIOS
// style={styles.container}
initialRoute={{
title: 'Login',
component: LoginPage,
}}/>
);
}
}
and in my login.js class
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
export default class Login extends Component {
render() {
return (
<View>
<Text style={styles.red}>Login</Text>
</View>
);
}
}
const styles = StyleSheet.create({
bigblue: {
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
},
red: {
color: 'red',
},
});
// skip this line if using Create React Native App
AppRegistry.registerComponent('Demo', () => Login);
but it not showing the login page as rootview
I have an excepted answer in the below question.
How to navigate from splash screen to login screen in react native?
There is a google drive link on it from where you can download a sample project, its a simple app figure it out from the sample app how you should set up the App.js.
I suggest You should use StackNavigator for navigation its the best method to follow in my app App.js is configured using StackNavigator.
I am building a ReactNative + Redux app and am using the ListView component.
In _renderRow() of the ListView, I'd like to return my own cell component (called JobDetailCell that only receives the data in its props from the component that is managing the ListView (called JobsRootComponent).
I came up with the following code so far:
JobsRootComponent.js
import React, {
Component,
StyleSheet,
Text,
View,
ListView,
ActivityIndicatorIOS,
NavigatorIOS,
TouchableHighlight
} from 'react-native'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { fetchJobs } from '../actions/Actions'
import { JobDetailCell } from './JobDetailCell'
import { JobDetailComponent } from './JobDetailComponent'
class JobsRootComponent extends Component {
...
_renderRow(rowData) {
const title = rowData.title
const subtitle = rowData.by
return (
<JobDetailCell title={title} subtitle={subtitle}></JobDetailCell>
)
}
...
render() {
return (
<ListView
style={styles.container}
dataSource={this.props.dataSource}
renderRow={this._renderRow}
/>
)
}
...
}
JobDetailCell.js
import React, {
Component,
StyleSheet,
Text,
View,
} from 'react-native'
export default class JobDetailCell extends Component {
render() {
return (
<View style={styles.cellContainer}>
<Text style={styles.cellTitle}>{this.props.title}</Text>
<Text style={styles.cellSubtitle}>{this.props.subtitle}</Text>
</View>
)
}
}
However, when I am running the app, I get the following errors in the chrome dev console:
ExceptionsManager.js:76 Warning:
React.createElement: type should not
be null, undefined, boolean, or number. It should be a string (for DOM
elements) or a ReactClass (for composite components). Check the render
method of StaticRenderer.
Can someone tell me what I am doing wrong here?
The problem is that you are importing your components in the wrong way.
This line
import { JobDetailCell } from './JobDetailCell'
Is equivalent to this line:
var JobDetailCell = require('./JobDetailCell').JobDetailCell;
Which gets undefined since you exported the component itself, which has no field named JobDetailCell.
This is how you should import your component:
import JobDetailCell from './JobDetailCell'