How to use LayoutAnimation on Android using react native - react-native

LayoutAnimation not working on android
I didn't find any issues like this, and these errors are not found in google)
"react-native": "0.67.4"
I try to use LayoutAnimation, my code looks like this:
constructor(props) {
super(props)
this.state = {
height: Dimensions.get('window').height,
sliderTopPosition: Dimensions.get('window').height/2-50
}
if (Platform.OS === 'android') {
UIManager.setLayoutAnimationEnabledExperimental &&
UIManager.setLayoutAnimationEnabledExperimental(true);
}
}
kbShow = (event) => {
LayoutAnimation.configureNext(LayoutAnimation.create(
event.duration,
LayoutAnimation.Types[event.easing] //'keyboard'
// LayoutAnimation.Types.easeInEaseOut
), () => {
// console.log(finish, 'finish')
}, () => {
console.log('KEYBOARD SHOW ANIMATION DID FAIL')
})
this.setState({
height: event.endCoordinates.screenY,
sliderTopPosition: this.state.sliderTopPosition-event.endCoordinates.height+150,
})
}
And it works fine on iOS, but if I try to run this code on android I get an error:
Unsupported interpolation type : keyboard
Ok, I replace this strings like this just for test:
//LayoutAnimation.Types[event.easing] //'keyboard'
LayoutAnimation.Types.easeInEaseOut
It still works on ios but not on android
And now error is like this:
Invalid layout animation : {NativeMap: {"type": easeInEaseOut}}
And no matter what type of easing I use it always throw this error

To make it work on Android, you need to supply a property:
LayoutAnimation.configureNext(LayoutAnimation.create(
event.duration,
LayoutAnimation.Types[event.easing],
'opacity'
)
The property can be either 'opacity', 'scaleX', 'scaleY' or 'scaleXY'.
It's a very misleading error message and the type checking should show that the property is required...

Related

How to update the style after useState update - React Native

I am currently facing a problem that does bother me a lot.
I am using the react-native-calendar-strip library. I would like to have the ability to deselect a date (update the day container from an orange container to a fully transparent one) which is not natively supported.
So I implemented the code bellow which does not work :
import CalendarStrip from "react-native-calendar-strip";
const EventCalendar = (props) => {
const [selectedDate, setSelectedDate] = useState("");
const [deselectDate, setDeselectDate] = useState(false);
const handleDaySelection = (date) => {
date = date.toLocaleString("fr-FR", option);
if (date == selectedDate) {
setSelectedDate("");
setDeselectDate(true);
} else {
setSelectedDate(date);
setDeselectDate(false);
}
}
return (
<View>
<CalendarStrip
onDateSelected={handleDaySelection}
daySelectionAnimation={{
type: "background",
duration: 200,
highlightColor: deselectDate ?
"rgba(0, 0, 0, 0)" : "#fca051",
}}
/>
In fact, the useState does not have the time to update before the daySelectionAnimation prop is called.
After having tried different things, I actually do not have anymore any ideas that could handle this problem.
Do you have any suggestions to help me handle this problem ?
Thanks guys !

The Route line is not showing in android by using FeatureCollection

I need your help in little bit query,
i'm trying to render the multiple polyline on a single map,it look like as it (IOS),
it perfectly fine work fine in IOS but not work in android, so my code Snippet it,
import MapboxGL from '#react-native-mapbox-gl/maps';
const MapbBoxDirection = ({shape}: any) => {
const sp = returnOption(shape);
const Poliline = React.useMemo(() => {
return (
<MapboxGL.Animated.ShapeSource
id="routeSource"
buffer={512}
tolerance={1}
lineMetrics={false}
clusterRadius={10}
shape={sp}>
<MapboxGL.Animated.LineLayer
id="routeFill"
style={{
lineColor: '#ff8109',
lineWidth: 10,
lineRoundLimit: 12,
lineCap: 'round',
lineOpacity: 1.84,
}}
/>
</MapboxGL.Animated.ShapeSource>
);
}, [shape, sp]);
return Poliline;
};
import {featureCollection, lineString as makeLineString} from '#turf/helpers';
///// Make Json
export const returnOption = (res): any => {
const feature = res.map((item: any, index: any) => {
if (item[`Route${index}`]?.length > 2) {
return makeLineString(item[`Route${index}`]);
}
});
const featureCollectiondata = featureCollection(feature);
return featureCollectiondata;
};
it's work fine in IOS but not work in android,
i'm also trying to make a json manually without truf helper, i'm facing same problem.
So would you please help me How i can resolve it for android,
one more thing is SINGLE route work fine for both platform so when i'm trying to use featurecollection json it create problem,
Please I'm very Thankful to you,
After a lot a effort i got the Solution Sometime undefined and null is generate default Therefor route line not render on android, but ios it will handle it by default So
export const returnOption = async (res: any, setShape: any) => {
const feature = await Promise.all(
res.map(async (item: any, index: any): Promise<any> => {
if (item[`Route${index}`]?.length > 1) {
// return makeLineString(item[`Route${index}`]);
return {
type: 'Feature',
properties: {
prop0: 'value0',
prop1: 0.0,
},
geometry: {
type: 'LineString',
coordinates: item[`Route${index}`],
},
};
}
}),
);
const RemoveUndefined = feature?.filter(item => item !== undefined);
setShape({
type: 'FeatureCollection',
features: RemoveUndefined,
});
};
finally I have achieve the solution.

java.lang.ClassCastException: java.lang.Double cannot be cast to java.lang.String when I use a RN switch Android only

I keep getting this error in the Android version of my React Native app. The iOS version of the app has zero problems with the React Native switch that I've used. This app is currently running on RN 0.54
Just in case, here's the code that uses the switch:
<View style={styles.feedbackSwitchWrapper}>
<Switch
value={this.props.feedbackCancellation}
onValueChange={() => {
this.feedbackCancellationToggle()
}}
onTintColor="#xxxx"
/>
</View>
And here is the error I get when I hit the switch.
Here's the updated code that ended up fixing the issue:
this.feedbackCancellation = SomeBluetoothEventEmitter.addListener('feedbackMode', event => {
// console.log('show me feedback mode object: ', event);
if (!event) {
return;
}
let feedbackCancellation = event.feedbackMode;
if (this.cancellationFeedbackDeferred) {
this.cancellationFeedbackDeferred.resolve(event.feedbackMode);
let trueOrFalseValue = this.convertIntToBool(feedbackCancellation);
/*
NOTE: for both feedbackCancellation and noiseReduction, we are getting the value
of each FROM THE DEVICE. We will use setFeedbackCancellationFunc to set the value in PROPS,
then we will use toggleFeedbackCancellationFunc to TOGGLE the values during
normal use.
*/
this.props.setFeedbackCancellationFunc(trueOrFalseValue);
} else {
if (this.mounted === true) { this.setState({ feedbackCancellation }) }
}
})

How detect tablet landscape on React Native

I want to border margin of of screen S on phone and tablet to be different. There are variants for tablet landscape and portrait mode.
How to create different margin dimension for the variants on phone, tablet portrait, tablet landscape ?
For those curious how to do on Android , we just create some resource files at the right folder :
values for default
values-sw600dp for tablet default
values-sw600dp-land for tablet landscape
The other answers have already addressed the screen detection task. However, there is still the issue of detecting if the code is running on a Tablet device. You can detect that using the react-native-device-info package, in particular its isTablet method. So, as an example, in your component:
constructor(){
super();
this.state = {orientation: 'UNKNOWN'}
this._onOrientationChanged = this._onOrientationChanged.bind(this);
}
_onOrientationChanged(orientation){
this._setState({orientation})
}
componentDidMount(){
Orientation.addOrientationListener(this._onOrientationChanged);
}
componentWillUnmount(){
Orientation.removeOrientationListener(this._orientationDidChange);
}
render(){
let layoutStyles;
if(DeviceInfo.isTablet()){
layoutStyles = this.state.orientation == 'LANDSCAPE' ? landscapeTabletStyle : portraitTabletLandscape; // Basic example, this might get more complex if you account for UNKNOWN or PORTRAITUPSIDEDOWN
}else{
layoutStyles = this.state.orientation == 'LANDSCAPE' ? landscapeStyle : portraitLandscape;
}
render(){
<View style={[styles.container, layoutStyles]} // And so on...
}
}
Note that the state holds the UNKNOWN value on the beginning. Have a look at the getInitialOrientation() of the package function. I am intentionally leaving that bit out because it simply reads a property that is set when the JS code loads, and I am not sure if that satisfies your usecase (i.e. this is not your first screen). What I usually like to do is store the rotation value in a redux store (where I initialize the orientation value to that of getInitialOrientation() and then subscribe only once to the orientation listener).
I think this library will be helpful for you: https://github.com/yamill/react-native-orientation
You can do something like that with it:
Orientation.getOrientation((err,orientation)=> {
console.log("Current Device Orientation: ", orientation);
if(orientation === 'LANDSCAPE') {
//do stuff
} else {
//do other stuff
}
});
// Extract from the root element in our app's index.js
class App extends Component {
_onLayout = event => this.props.appLayout(event.nativeEvent.layout);
render() {
return (
<View onLayout={this._onLayout}>
{/* Subviews... */}
</View>
);
}
}
export const SET_ORIENTATION = 'deviceStatus/SET_ORIENTATION';
export function appLayout(event: {width:number, height:number}):StoreAction {
const { width, height } = event;
const orientation = (width > height) ? 'LANDSCAPE' : 'PORTRAIT';
return { type: SET_ORIENTATION, payload: orientation };
}
Code Copied from Here

move the view up when keyboard as shown in react-native

hai i am trying to move the view up when keyboard as shown using react-native,I followed the #sherlock's comment in (How to auto-slide the window out from behind keyboard when TextInput has focus? i got an error like this
I don't know how to resolve this error, can any one help me how to resolve this, any help much appreciated.
There's a great discussion about this in the react-native github issues
https://github.com/facebook/react-native/issues/3195#issuecomment-147427391
I'd start there, but here are a couple more links you may find useful, one of which is mentioned already in the article you referenced...
[React Tips] Responding to the keyboard with React Native
Andr3wHur5t/react-native-keyboard-spacer
In my library "react-native-form-generator" (https://github.com/MichaelCereda/react-native-form-generator) i did the following.
I created a Keyboard Aware scroll view (partially modified from https://github.com/facebook/react-native/issues/3195#issuecomment-146518331)
the following it's just an excerpt
export class KeyboardAwareScrollView extends React.Component {
constructor (props) {
super(props)
this.state = {
keyboardSpace: 0,
}
this.updateKeyboardSpace = this.updateKeyboardSpace.bind(this)
this.resetKeyboardSpace = this.resetKeyboardSpace.bind(this)
}
updateKeyboardSpace (frames) {
let coordinatesHeight = frames.endCoordinates.height;
const keyboardSpace = (this.props.viewIsInsideTabBar) ? coordinatesHeight - 49 : coordinatesHeight
this.setState({
keyboardSpace: keyboardSpace,
})
}
resetKeyboardSpace () {
this.setState({
keyboardSpace: 0,
})
}
componentDidMount () {
// Keyboard events
DeviceEventEmitter.addListener('keyboardWillShow', this.updateKeyboardSpace)
DeviceEventEmitter.addListener('keyboardWillHide', this.resetKeyboardSpace)
}
componentWillUnmount () {
DeviceEventEmitter.removeAllListeners('keyboardWillShow')
DeviceEventEmitter.removeAllListeners('keyboardWillHide')
}
scrollToFocusedInput (event, reactNode, extraHeight = 69) {
const scrollView = this.refs.keyboardScrollView.getScrollResponder();
setTimeout(() => {
scrollView.scrollResponderScrollNativeHandleToKeyboard(
reactNode, extraHeight, true
)
}, 220)
}
render () {
return (
<ScrollView
ref='keyboardScrollView'
keyboardDismissMode='interactive'
contentInset={{bottom: this.state.keyboardSpace}}
showsVerticalScrollIndicator={true}
style={this.props.style}>
{this.props.children}
</ScrollView>
)
}
Then i use it like any other scrollview
import { KeyboardAwareScrollView } from 'react-native-form-generator'
...
handleFormFocus(event, reactNode){
this.refs.scroll.scrollToFocusedInput(event, reactNode)
}
...
<KeyboardAwareScrollView ref='scroll'>
<Form ref='registrationForm'
onFocus={this.handleFormFocus.bind(this)}
onChange={this.handleFormChange.bind(this)}
label="Personal Information">
........
</Form>
</KeyboardAwareScrollView>
on change my component (Form) will call scrollToFocusedInput in KeyboardAwareScrollView (using the ref).
i suggest to check the code of my library (see the link on top), or simply use it (everything it's already tested and working).
If you have further questions just comment