I'm trying to animate the height of a View in react native. The animation is working as expected in iOS but is not working in Android. The animated View seems to always be full height regardless of the animation value. Relevant code is below:
var Facets = React.createClass({
getInitialState: function() {
return {
h: new Animated.Value(0),
};
},
_animate: function(newHeight) {
Animated.timing(this.state.h, {
duration: 300,
toValue: newHeight
}).start();
},
render: function() {
var facetComponents = [];
if (this.props.shown) {
this._animate(MAX_HEIGHT);
}
else {
this._animate(0);
}
facets.map( (facet, idx) => {
facetComponents.push(
<Facet
key={idx}
facet={facet}
filterBy={this.props.filterBy} />);
});
return (
<Animated.View style={{ maxHeight: this.state.h }}>
{facetComponents}
</Animated.View>
);
}
});
Try moving your Animated Value out of state:
componentDidMount() {
this.h = new Animated.Value(0)
}
Then, refer to it as this.h as opposed to this.state.h
Related
Here is My Code
<FlatList
refreshControl={
<RefreshControl
enabled={true}
refreshing={loader}
onRefresh={() => getLockerHistory(1)}
tintColor={ThemeColors.primary}
/>
}
ListEmptyComponent={noDataMessage()}
onScroll={(e) => {
if (Platform.OS == 'ios') {
return;
}
let paddingToBottom = 20;
paddingToBottom += e.nativeEvent.layoutMeasurement.height;
if (e.nativeEvent.contentOffset.y >= e.nativeEvent.contentSize.height - paddingToBottom) {
getNextRecordsPage();
}
}}
ListFooterComponent={() => {
return (
<ActivityIndicator color={ThemeColors.black} animating={footerLoader} />
);
}}
ListFooterComponentStyle={footerLoader ? { marginVertical: 20 } : {}}
ListFooterComponentStyle={{ paddingVertical: 20 }}
onEndReached={() => {
if (Platform.OS == 'ios') {
getNextRecordsPage()
}
}}
onEndReachedThreshold={Platform.OS == 'ios' ? 0 : null}
keyExtractor={(item, index) => item.lockerCode + '' + index}
data={lockers}
renderItem={(itemData) => {
return renderItem(itemData.item, props.navigation);
}}
/>
When I have more then 5 records which means there is not empty space left on screen then the refresh control won't work. It only works the seperator space between cells.
And my cell is made up of plain views nothing fancy or touchable.
Note: I tried to debug it with empty view but seems like pull/drag to refresh is not being listen by Flat List.
Any help?
Below code is working for me to achieve Refresh Control
import { View, Text, RefreshControl, FlatList } from 'react-native'
<FlatList
testID="DiscussionView"
initialNumToRender={5}
maxToRenderPerBatch={5}
windowSize={11}
data={posts}
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={this.onRefresh} />}
keyExtractor={this.keyExtractor}
refreshing={refreshing}
renderItem={this.renderPostItem}
onEndReached={this.onEndReached}
scrollEnabled={scrollEnabled}
onEndReachedThreshold={0.3}
contentContainerStyle
listKey="DiscussionViewList"
onMomentumScrollBegin={() => {
this.onEndReachedCalledDuringMomentum = false
}}
/>
onRefresh = () => {
this.setState(
{ refreshing: true },
// Do what you want,
)
}
keyExtractor = (item) => String(item.id)
renderPostItem = ({ item }) => {
// Render Item here
}
onEndReached = () => {
if (!this.onEndReachedCalledDuringMomentum) {
// Call API again if needed by use case
this.onEndReachedCalledDuringMomentum = true
}
}
Am trying to animate an image to shrink when the onscreen keyboard is called (see code below). Got it working on IOS but not on Android :(
I have searched the web for solutions, but so far nothing works. Any suggestions?
Thanks in advance
constructor(props) {
super(props);
this.imageSize = new Animated.Value(imageSizeNormal);
}
componentWillMount() {
this.keyboardWillShowSub = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow);
this.keyboardWillHideSub = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide);
}
componentWillUnmount() {
this.keyboardWillShowSub.remove();
this.keyboardWillHideSub.remove();
}
keyboardWillShow = (event) => {
Animated.timing(this.imageSize, {
toValue: imageSizeSmall
}).start();
};
keyboardWillHide = (event) => {
Animated.timing(this.imageSize, {
toValue: imageSize
}).start();
};
render() {
return (
<Animated.Image
source={require('../../assets/circle.png')}
resizeMode="contain"
style={[styles.logo, { height: this.imageSize, width: this.imageSize}]}
/>
)
}
const imageSizeNormal = Dimensions.get("window").width/2;
const imageSizeSmall = Dimensions.get("window").width/4;
Here's how I solved it.
First thing I did was change the keywords "keyboardWill..." to "keyboardDid...""
Second, I added the following to AndroidManifest.xml
android:fitsSystemWindows="true"
android:windowSoftInputMode="adjustResize"
Sources:
windowSoftInputMode="adjustResize" not working with translucent action/navbar
https://medium.freecodecamp.org/how-to-make-your-react-native-app-respond-gracefully-when-the-keyboard-pops-up-7442c1535580
I'm trying to select multiple images in my ionic app using the ImagePicker plugin, when I select only one image works, but if I select more images the app closes
Versions
ionic: 4.0.3
android: 7.0.0
imagePicker: 2.2.2
Code
getPermission() {
this.imagePicker.hasReadPermission()
.then(res => {
if (res) {
this.openGallery()
} else {
this.imagePicker.requestReadPermission()
.then(res => {
if (res === 'ok') {
this.openGallery()
}
})
}
})
.catch(error => console.log(error))
}
openGallery() {
let options = {
maximumImagesCount: 10,
width: 500,
height: 500,
quality: 100,
outputType: 1
}
this.imagePicker.getPictures(options)
.then(file => {
this.images = new Array(file.length);
for (let i = 0; i < file.length; i++) {
this.images[i] = 'data:image/jpeg;base64,' + file[i]
}
})
}
any help on how to solve this?
constructor(public navCtrl: NavController,
private camera: Camera,
private transfer: FileTransfer,
private file: File,
private fileOpener: FileOpener,
private loadingCtrl: LoadingController,
private plt: Platform,
private imagePicker: ImagePicker,
private base64: Base64,
private sanitizer: DomSanitizer) {
}
images=[];
public items: Array<{ images: string;}> = [];
takePhoto(){
this.imagePicker.hasReadPermission()
.then(res => {
if (res) {
this.openGallery();
} else {
this.imagePicker.requestReadPermission()
.then(res => {
if (res === 'ok') {
this.openGallery();
}
})
}
})
.catch(error => console.log(error));
}
openGallery () {
let options = {
maximumImagesCount: 10,
correctOrientation: true,
quality: 30,
width: 100,
height: 100,
allowEdit : true,
outputType: 1,
}
this.imagePicker.getPictures(options)
.then(file => {
//this.images = new Array(file.length);
for (let i = 0; i < file.length; i++) {
//this.images[i] = 'data:image/jpeg;base64,' + file[i]
this.images.push('data:image/jpeg;base64,' +file[i]);
}
});
}
I've been looking for a solution just like yours for me ... your code is perfect ... see the small changes uqe made by adding ";" and reducing image size and quality ...
Congratulations and thank you for helping me! See on your phone if you use the way to kill all APP as soon as you get out of it, because it can also be a cause for when you access the camera the app stops, because it dies ....
I'm using Beefe's react-native-picker and I want to add custom styles.
I have an method that renders the picker as follows:
renderModal() {
if (!this.state.itemPickerVisible) return;
return (
<View>
{
Picker.init({
pickerData: map(categories, cat => cat.code + "." + cat.name),
pickerTitleText: gettext("Please select"),
pickerConfirmBtnText: gettext("Done"),
pickerCancelBtnText: gettext("Cancel"),
selectedValue: [this.state.selectedValue.code],
pickerBg: [255, 255, 255, 1],
onPickerConfirm: data => {
let code = data[0].substring(0, data[0].indexOf('.'));
this.setState({selectedValue: get_category(code), itemPickerVisible: false}, () => this.selectedItem());
},
onPickerCancel: data => {
Picker.hide();
},
onPickerSelect: data => {
console.log(data);
}
})
}
{
Picker.show()
}
</View>
)
}
And the render method is as follows:
render() {
let value = this.props.value ? this.props.value.name : "";
return (
<View style={{
borderLeftWidth: 4,
borderLeftColor: this.props.mandatory ? this.props.value == null ? s.paletteMandatory : s.success : '#fff'
}}>
{this.renderModal()}
<ItemDetail locked={this.props.locked} selectItem={this.selectItem.bind(this)}
resetItem={this.resetItem.bind(this)} title={this.props.title} value={value}
icon={this.props.icon}/>
</View>
)
}
Is there any way to add custom style (fontFamily, color) to the picker items?
If you check the component docs there are several parameters you can pass to init function.
Picker.init({
pickerTitleColor: [90, 90, 90, 1], // RGBA values
pickerData: data,
selectedValue: [59],
onPickerConfirm: data => {
console.log(data);
},
onPickerCancel: data => {
console.log(data);
},
onPickerSelect: data => {
console.log(data);
}
});
Picker.show();
I'm playing with react Native and I have a problem with the animation of transition.
Windows 10 - Hyper V, Visual Code Emulator Android - Ignite Boilerplate.
What I'm trying to do:
When I click, I want to show a circle with a scale animation from 0 to 2 on the click position.
What I have:
See the picture below (I have put a setTimout to see the first frame). On the first click, The component is displayed a first time very quickly with its natural width and height but the scale on 0,001 has no effect. After that, the animation begins from the scale 0,001 to 2.
With the other clicks, The circle start the first frames with the dimension of the previous circle. and then, the animation begins. But one more time, the scale : 0 has no effect at the first frame.
Here is the code of the Lunch screen:
export default class LaunchScreen extends Component {
state = {
clicks: []
};
handlePress(evt) {
console.log(evt.nativeEvent.locationX, evt.nativeEvent.locationY)
let xCoord = evt.nativeEvent.locationX;
let yCoord = evt.nativeEvent.locationY;
this
.state
.clicks
.push({x: xCoord, y: yCoord});
this.setState({clicks: this.state.clicks});
}
renderClick() {
if (this.state.clicks.length > 0) {
return this
.state
.clicks
.map((item, i) =>< ClickAnimation key = {
item.x
}
x = {
item.x
}
y = {
item.y
} />)
} else {
return <View/>
}
}
render() {
return (
<View style={styles.container}>
<ScrollView
style={styles.scrollView}
horizontal={true}
showsHorizontalScrollIndicator={true}
contentContainerStyle={styles.scrollView}>
<TouchableWithoutFeedback
style={styles.touchableWithoutFeedback}
onPress=
{evt => this.handlePress(evt)}>
<View style={styles.scrollView}>
{this.renderClick()}
</View>
</TouchableWithoutFeedback>
</ScrollView>
</View>
)
}
}
And here the component of the circle:
import React from 'react';
import PropTypes from 'prop-types';
import {Animated, View, Easing} from 'react-native';
export default class ClickAnimation extends React.Component {
constructor() {
super();
console.log(this.state)
this.state = {
scaleAnim: new Animated.Value(0.001);
};
}
componentDidMount() {
Animated
.timing(this.state.scaleAnim, {
toValue: 2,
duration: 2000
})
.start();
.scaleAnim
}
render() {
return (<Animated.View
style={{
zIndex: 10,
borderColor: "blue",
borderRadius: 400,
borderWidth: 1,
position: "absolute",
top: this.props.y,
left: this.props.x,
width: 60,
height: 60,
backgroundColor: "red",
transform: [
{
scaleY: this.state.scaleAnim
? this.state.scaleAnim
: 0
}, {
scaleX: this.state.scaleAnim
? this.state.scaleAnim
: 0
}
]
}}/>);
}
}
Do you have an Idea why this is so?
I have found the solution.
This come with this issue:
https://github.com/facebook/react-native/issues/6278
I had seen it and this is why I wrote 0,001. But 0,001 is still to little. With 0,01 it works great.
So the answer is:
Just replace 0.001 by 0.01 because it was too little.