I am trying to set the color of my ActivityIndicator:
<View style={[{height: this.props.calendarHeight}, this.style.placeholder]}>
<ActivityIndicator size="large" color={this.style.loadingSpinner.color} />
</View>
I am setting my style here:
import React, {Component} from 'react';
import {Text, View, ActivityIndicator} from 'react-native';
import Calendar from '../calendar';
import styleConstructor from './style';
class CalendarListItem extends Component {
constructor(props) {
super(props);
this.style = styleConstructor(props.theme);
}
shouldComponentUpdate(nextProps) {
const r1 = this.props.item;
const r2 = nextProps.item;
return r1.toString('yyyy MM') !== r2.toString('yyyy MM') || !!(r2.propbump && r2.propbump !== r1.propbump);
}
render() {
const row = this.props.item;
if (row.getTime) {
return (
<Calendar
theme={this.props.theme}
style={[{height: this.props.calendarHeight}, this.style.calendar]}
current={row}
hideArrows
hideExtraDays={this.props.hideExtraDays === undefined ? true : this.props.hideExtraDays}
disableMonthChange
markedDates={this.props.markedDates}
markingType={this.props.markingType}
hideDayNames={this.props.hideDayNames}
onDayPress={this.props.onDayPress}
minDate={this.props.minDate}
maxDate={this.props.maxDate}
firstDay={this.props.firstDay}
monthFormat={this.props.monthFormat}
dayComponent={this.props.dayComponent}
disabledByDefault={this.props.disabledByDefault}
showWeekNumbers={this.props.showWeekNumbers}
/>);
} else {
const text = row.toString();
return (
<View style={[{height: this.props.calendarHeight}, this.style.placeholder]}>
<ActivityIndicator size="large" color={this.style.loadingSpinner} />
</View>
);
}
}
}
export default CalendarListItem;
My style.js is:
import {StyleSheet} from 'react-native';
import * as defaultStyle from '../style';
const STYLESHEET_ID = 'stylesheet.calendar-list.main';
export default function getStyle(theme={}) {
const appStyle = {...defaultStyle, ...theme};
return StyleSheet.create({
container: {
backgroundColor: appStyle.calendarBackground
},
placeholder: {
backgroundColor: appStyle.calendarBackground,
alignItems: 'center',
justifyContent: 'center'
},
placeholderText: {
fontSize: 30,
fontWeight: '200',
color: appStyle.dayTextColor
},
loadingSpinner: {
color: '#fff'
},
calendar: {
paddingLeft: 15,
paddingRight: 15
},
...(theme[STYLESHEET_ID] || {})
});
}
However, this.style.loadingSpinner.color is undefined.
How can set the color?
use the CSS transform will make the icon bigger
<ActivityIndicator size="large" style={{ transform: [{ scaleX: 2 }, { scaleY: 2 }] }} color="#E85F5C" />
To set the color of ActivityIndicator component, just set the prop color to what you want, like this
<ActivityIndicator color={colors.yourColor} /> // if you have an object with your colors
or
<ActivityIndicator color='#000' />
You can also change the size of this component with the prop size
<ActivityIndicator size='small' /> // you can set 'small' or 'large'
remember to import ActivityIndicator from 'react-native'
You can give the custom styling doing something like -
<ActivityIndicator
animating = {animating}
color = '#bc2b78' // color of your choice
size = "large"
style = {styles.activityIndicator}/> //add extra styling
// add style something like this -
activityIndicator: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
height: 80
}
Related
I am trying to learn FlatList component of react-native. Observing a tutorial, I have implemented a sample applications which list components inside a scrollview. I am trying to replace scrollview with FlatList, but items are not renderings on the screen. I have included the main source code here.
App.js
import React, { Component } from 'react'
import {
StyleSheet,
View,
ScrollView,
FlatList
} from 'react-native'
import ColorButton from './components/ColorButton'
class App extends Component {
constructor() {
super()
this.state = {
backgroundColor: 'blue'
}
this.changeColor = this.changeColor.bind(this)
}
changeColor(backgroundColor) {
this.setState({backgroundColor})
}
render() {
const { backgroundColor } = this.state
return(
<FlatList
data = {'red', 'green', 'salmon'}
renderItem = {(color) => {
<ColorButton backgroundColor={color} onSelect={this.changeColor}></ColorButton>
} } />
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 20
}
})
export default App
ColorButton.js
import React from 'react'
import {
StyleSheet,
Text,
View,
TouchableHighlight
} from 'react-native'
const ColorButton = ({ backgroundColor, onSelect=f=>f }) => (
<TouchableHighlight
style = {styles.button}
onPress={() => onSelect(backgroundColor)}
underlayColor="orange">
<View style = {styles.row}>
<View style = {[styles.sample, {backgroundColor}]} />
<Text style = {styles.text}>backgroundColor</Text>
</View>
</TouchableHighlight>
)
const styles = StyleSheet.create({
button: {
margin: 10,
padding: 10,
borderWidth: 2,
borderRadius: 10,
alignSelf: 'stretch',
backgroundColor: 'rgba(255,255,255,0.8)'
},
row: {
flexDirection: 'row',
alignItems: 'center'
},
sample: {
height: 20,
width: 20,
borderRadius: 10,
margin: 5,
backgroundColor: 'white'
},
text: {
fontSize: 30,
margin: 5
}
})
export default ColorButton
Change your code for flatlist to the one below :
<FlatList
data = {['red', 'green', 'salmon']}
renderItem = {({item}) => {
<ColorButton backgroundColor={item} onSelect={this.changeColor}>
</ColorButton>
} } />
Hope it helps. feel free for doubts
I am developing a sample app as part of learning react-native, in which it has a ColorForm that accepts the value from a TextInput and with the help of Props, the data will be sent to the Main view, such as App. The App has a SectionList that doesn't update with the new value inputs from ColorForm.
Following is the source code that I have used:
App.js
import React, { Component } from 'react'
import {
StyleSheet,
SectionList,
Text,
Alert
} from 'react-native'
import ColorButton from './components/ColorButton'
import ColorForm from './components/ColorForm'
class App extends Component {
constructor() {
super()
this.state = {
backgroundColor: 'blue',
availableColors: ['red', 'green', 'yellow', 'pink']
}
this.changeColor = this.changeColor.bind(this)
this.newColor = this.newColor.bind(this)
}
changeColor(backgroundColor) {
this.setState({ backgroundColor })
}
newColor(color) {
const colors = [
...this.state.availableColors,
color
]
this.setState(colors)
}
render() {
const { backgroundColor, availableColors } = this.state
return (
<SectionList style={styles.list}
backgroundColor={backgroundColor}
sections={[{ title: "Header", data: availableColors }]}
renderSectionHeader={({ section }) => (
<ColorForm onNewColor={this.newColor} />
)}
renderItem={({ item }) => (
<ColorButton backgroundColor={item} onSelect={this.changeColor} />
)}
keyExtractor={(item, index) => index}
/>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 20
},
list: {
marginTop: 40
}
})
export default App
ColorForm.js
import React, { Component } from 'react'
import {
View,
Text,
StyleSheet,
TextInput
} from 'react-native'
import PropTypes from 'prop-types'
export default class ColorForm extends Component {
constructor() {
super()
this.state = {
txtColor: ''
}
this.submit = this.submit.bind(this)
}
submit() {
this.props.onNewColor(this.state.txtColor.toLowerCase())
this.setState({ txtColor: '' })
}
render() {
return (
<View style={styles.container}>
<TextInput
style={styles.txtInput}
placeholder="Enter a color..."
onChangeText={(txtColor) => this.setState({ txtColor })}
value={this.state.txtColor}
/>
<Text style={styles.button} onPress={this.submit}>Add</Text>
</View>
)
}
}
ColorForm.propTypes = {
onNewColor: PropTypes.func.isRequired
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-around',
backgroundColor: 'lightgrey',
height: 70,
paddingTop: 20
},
txtInput: {
flex: 1,
margin: 5,
padding: 5,
borderWidth: 2,
fontSize: 20,
borderRadius: 5,
backgroundColor: 'snow'
},
button: {
backgroundColor: 'darkblue',
margin: 5,
padding: 5,
alignItems: 'center',
justifyContent: 'center',
color: 'white',
fontSize: 20
}
})
Can anyone help me to sort out the issue? Thanks in advance.
It looks like the state is not being updated in your method newColor, since availableColors is an array u can use push operation to add new value to the array update the code as below and it will work.
newColor(color) {
console.log('adding', color)
const colors = this.state.availableColors
colors.push(color)
this.setState(colors)
}
I had an issue where there was a white shadow above the button after applying the marginTop: 15 property.
This happens because buttonStyle applies styling to the inner View and since elevation (shadow) is applied to the outer View, this way you basically create a 'padding' in the outer View.
I was expecting for it to be resolved in the following manner as you see below:
import React, { Component } from "react";
import { View, Text, ScrollView, Dimensions } from "react-native";
import { Button } from "react-native-elements";
const SCREEN_WIDTH = Dimensions.get("window").width;
class Slides extends Component {
renderLastSlide(index) {
if (index === this.props.data.length - 1) {
return (
<Button
title="Onwards!"
raised
buttonStyle={styles.buttonStyle}
containerViewStyle={{ marginTop: 15 }}
onPress={this.props.onComplete}
/>
);
}
}
renderSlides() {
return this.props.data.map((slide, index) => {
return (
<View
key={slide.text}
style={[styles.slideStyle, { backgroundColor: slide.color }]}
>
<Text style={styles.textStyles}>{slide.text}</Text>
{this.renderLastSlide(index)}
</View>
);
});
}
render() {
return (
<ScrollView horizontal style={{ flex: 1 }} pagingEnabled>
{this.renderSlides()}
</ScrollView>
);
}
}
const styles = {
slideStyle: {
flex: 1,
justifyContent: "center",
alignItems: "center",
width: SCREEN_WIDTH
},
textStyles: {
fontSize: 30,
color: "white",
textAlign: "center"
},
buttonStyle: {
backgroundColor: "#0288D1"
}
};
export default Slides;
But the marginTop: 15 is having no effect on the button now. I am not sure what else to do here.
You can try View
<View style={{marginTop: 15}}}>
<Button
title="Onwards!"
raised
buttonStyle={styles.buttonStyle}
onPress={this.props.onComplete}
/>
<View>
Instead of using "style" to apply the style to the React Native Elements component, use containerStyle.
Here is the reference to the documentation where it is indicated:
https://reactnativeelements.com/docs/customization/
An example:
// A React Native Elements button
<Button
containerStyle={styles.button} // apply styles calling "containerStyle"
title="Sign up"
/>
// On the StyleSheet:
const styles = StyleSheet.create({
button: {
color: '#C830CC',
margin: 10,
},
});
I am trying to display a simple .jpg image by sending the Image path as a prop to the component which is supposed to render it. In the below way.
App.js
import React, { Component } from 'react';
import { View, Text, Image } from 'react-native';
import Header from './components/Header';
import ImageSlider from './components/ImageSlider';
import ImageShow from './components/ImageShow';
class App extends Component {
render () {
return (
<View style={{flex:1}}>
<Header headerText = "HONEST REVIEWS" />
<ImageSlider />
<ImageShow imagePath = "./abc.jpg"/>
<ImageShow imagePath = "./abc.png" />
</View>
);
}
}
export default App;
ImageShow.js
import React from 'react';
import { View, Image, Dimensions } from 'react-native';
const widthOfScreen = Dimensions.get('window').width;
const ImageShow = (imageProps) => {
return (
<View>
<Image style = { {width: 50, height: 50} } source = { {uri: imageProps.imagePath} } />
</View>
);
};
const styles = {
ImageStyle : {
height: 30,
width: widthOfScreen
}
}
export default ImageShow;
ImageSlider.js
import React from 'react';
import Carousel from 'react-native-banner-carousel';
import { StyleSheet, Image, View, Dimensions } from 'react-native';
const BannerWidth = Dimensions.get('window').width;
const BannerHeight = 250;
const images = [
require('./abc.jpg'),
require('./abc.jpg'),
require('./abc.jpg')
];
export default class ImageSlider extends React.Component {
renderPage(image, index) {
return (
<View key={index}>
<Image style={styles.imagesInSlider} source = { image } />
</View>
);
}
render() {
return (
<View style={styles.container}>
<Carousel
autoplay
autoplayTimeout={2000}
loop
index={0}
pageSize={BannerWidth}
>
{images.map((image, index) => this.renderPage(image, index))}
</Carousel>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
justifyContent: 'flex-start',
alignItems: 'center'
},
imagesInSlider: {
width: BannerWidth,
height: 250,
resizeMode: 'stretch',
}
});
My folder structure is :
ProjectName
------src
--------components
-----------ImageShow.js
-----------ImageSlider.js
-----------Header.js
-----------abc.jpg
--------App.js
Ideally the Image should be displayed when I am passing the locally stored Image path, but I am not getting any Image displayed but a Warning message which says:
"failed prop type: invalid prop 'source' supplied to 'ForwardRef(image)'"
This code work for me to get the image
import image1 from '../assets/images/abc.png'
import image2 from '../assets/images/abc.png'
const images = [
{
name: image1
},
{
name: image2
}]
const RenderPage = ({ image }) => {
return (
<Image resizeMode="contain" style={{ width: 50, height: 100, marginBottom: 5 }} source={image} />
)
}
class myclass extends Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
{images.map((image, index) =>
<RenderPage key={index} image={image.name} />
)}
</View>
)
}
}
Here the screenshot:
I try to pass a variable on the transform property style in react-native but it don't work. My code bellow :
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
import { Accelerometer, Gyroscope } from 'react-native-sensors';
import { sensors } from 'react-native-sensors';
export default class Sensors extends Component {
constructor(props) {
super(props);
this.state = {
rotate: 0
}
}
render() {
var degree = this.state.rotate;
return (
<View style={styles.container}>
<View style={styles.fleche}></View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
fleche: {
width: 5,
height: 150,
backgroundColor: '#000000',
borderRadius: 5,
transform: [{ rotate: '' + this.state.rotate + 'deg' }],
}
});
AppRegistry.registerComponent('Compass', () => Sensors);
I don't know the way to pass the variable in the transform style. Currently, I have this error : undefine is not an object(evaluating 'this.state.rotate').
Try this:
render(){
const transform = [{ rotate: this.state.rotate + 'deg' }]
var degree = this.state.rotate
return (
<View style={styles.container}>
<View style={[styles.fleche, transform]} />
</View>
)
}