msinghus96
commented
5 years ago For hotfix just wrap your component inside parent view(If your are using conditional rendering make sure wrap that view outside that condition. This will fix that issue..
Closed gdoudeng closed 4 years ago
msinghus96
commented
5 years ago For hotfix just wrap your component inside parent view(If your are using conditional rendering make sure wrap that view outside that condition. This will fix that issue..
jomla97
commented
4 years ago My project is suffering from this at the moment. The solution by @msinghus96 isn't working for me unfortunately.
For hotfix just wrap your component inside parent view(If your are using conditional rendering make sure wrap that view outside that condition. This will fix that issue..
Any other ideas?
msinghus96
commented
4 years ago My project is suffering from this at the moment. The solution by @msinghus96 isn't working for me unfortunately.
For hotfix just wrap your component inside parent view(If your are using conditional rendering make sure wrap that view outside that condition. This will fix that issue..
Any other ideas?
Can you share your code.
jomla97
commented
4 years ago @msinghus96 Here's the component using the experimental LayoutAnimation:
import Text from './Text.js';
import SectionButton from './ExpandableCard/SectionButton.js';
import SectionListRowButton from './ExpandableCard/SectionListRowButton.js';
type Props = {};
export default class ExpandableCard extends Component<Props>{
constructor(props) {
super(props);
this.state = {
expanded: false
};
if(Platform.OS === "android"){
if(UIManager.setLayoutAnimationEnabledExperimental){
UIManager.setLayoutAnimationEnabledExperimental(true);
}
}
}
componentDidUpdate(prevProps, prevState){
if(this.props.expandable === false && this.state.expanded){
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
this.setState({expanded: false});
}
}
toggleExpanded(){
if(this.props.expandable !== false){
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
this.setState({expanded: !this.state.expanded});
}
}
render(){
return (
<TouchableWithoutFeedback onPress={() => this.toggleExpanded()}>
<View style={Styles.ExpandableCard.wrapper}>
{
!this.state.expanded ?
<View style={Styles.ExpandableCard.retractedView}>
<Text style={Styles.ExpandableCard.retractedViewTitle}>{this.props.retractedTitle}</Text>
<View style={Styles.ExpandableCard.retractedViewIconsWrapper}>
{
this.props.retractedIcons !== undefined && this.props.retractedIcons.length > 0 ?
this.props.retractedIcons.map((icon, key) => {
var IconLibrary = icon.library;
return (
<IconLibrary key={key} name={icon.name} style={Styles.ExpandableCard.retractedViewIcon}/>
);
})
: null
}
</View>
</View>
:
<View style={{height: this.state.expanded ? null : 0}}>
{
this.props.sections.map((section, sectionKey) => (
<View key={sectionKey} style={Styles.ExpandableCard.expandedViewSection}>
<View style={Styles.ExpandableCard.expandedViewSectionTitleWrapper}>
<Text style={Styles.ExpandableCard.expandedViewSectionTitle}>{section.title}</Text>
<View style={Styles.ExpandableCard.expandedViewSectionButtonWrapper}>
{
section.buttons !== undefined && section.buttons !== null ?
section.buttons.map((button, key) => (<SectionButton key={key} {...button}/>))
: null
}
</View>
</View>
<View style={Styles.ExpandableCard.expandedViewSectionList}>
{
section.list.map((sectionListRow, sectionListKey) => (
<View key={sectionListKey} style={Styles.ExpandableCard.expandedViewSectionListRow}>
<Text style={Styles.ExpandableCard.expandedViewSectionListRowText}>{sectionListRow.value}</Text>
<View style={Styles.ExpandableCard.expandedViewSectionListRowButtonWrapper}>
{
sectionListRow.buttons !== undefined && sectionListRow.buttons !== null ?
sectionListRow.buttons.map((button, key) => (<SectionListRowButton key={key} {...button}/>))
: null
}
</View>
</View>
))
}
</View>
</View>
))
}
</View>
}
</View>
</TouchableWithoutFeedback>
);
}
}It can pretty much be summed up with this:
export default class ExpandableCard extends Component<Props>{
constructor(props) {
super(props);
this.state = {
expanded: false
};
if(Platform.OS === "android"){
if(UIManager.setLayoutAnimationEnabledExperimental){
UIManager.setLayoutAnimationEnabledExperimental(true);
}
}
}
toggleExpanded(){
if(this.props.expandable !== false){
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
this.setState({expanded: !this.state.expanded});
}
}
render(){
return (
<TouchableWithoutFeedback onPress={() => this.toggleExpanded()}>
<View style={Styles.ExpandableCard.wrapper}>
{
!this.state.expanded ?
<View style={Styles.ExpandableCard.retractedView}>
</View>
:
<View style={{height: this.state.expanded ? null : 0}}>
</View>
}
</View>
</TouchableWithoutFeedback>
);
}
}If anyone needs it I've found a viable alternative:
I've successfully implemented Transitioning from react-native-reanimated, which works much in the same way. A quite important fix was merged into master a couple of days ago though, which version 1.4.0 does not include. I installed it directly from the master github branch.
jomla97
commented
4 years ago Hey @gdoudeng why did you close the issue?
TheSavior
commented
4 years ago If anyone is able to provide a simplified, standalone repro that would be super helpful to investigate this. Ideally the repro should use Expo's Snack. We know there are some crashes with Layout Animations on Android but have had trouble tracking them all down. If you could create a repro for this we'd greatly appreciate it.
mjstelly
commented
4 years ago Unfortunately, @msinghus96, your solution did not resolve my similar issue. The called method
const expandItem = () => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
setExpanded(!expanded)
}executed in onPress={expandItem}
from here:
this.props.orderHistoryData.map(userData => <UserOrders data={userData} key={userData.id} />)
is already wrapped in a ScrollView which itself is wrapped in a parent View. I continue to receive the same error
unknown:ReactNative: java.lang.NullPointerException: Attempt to invoke virtual method 'android.view.ViewParent android.view.View.getParent()' on a null object reference
@TheSavior I'll see if I can replicate this in minimal POC app. UPDATE: Unfortunately, I am unable to reproduce the error using this expo example. Anyone else have a workaround for this bug?
k3nda
commented
4 years ago Yes, same issue here. Env:
This code:
if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
UIManager.setLayoutAnimationEnabledExperimental(true)
}together with:
onAccountDetailToggle = () => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.spring)
this.setState((state) => ({ isSliderVisible: !state.isSliderVisible }))
}makes app crash. For first click when panel is expanded it is ok but for the second click when it should hide then app crash.
TheSavior
commented
4 years ago @k3nada, can you put that into a complete example into an expo snack that crashes. See my comment above.
stale[bot]
commented
4 years ago Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.
stale[bot]
commented
4 years ago Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.
React Native version:0.60.4 phone:OPPO PAAM00 android 9.0 System: OS: Windows 10 CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz Memory: 7.47 GB / 19.89 GB Binaries: Node: 10.14.1 - C:\Program Files\nodejs\node.EXE Yarn: 1.13.0 - ~\AppData\Roaming\npm\yarn.CMD npm: 6.9.0 - ~\AppData\Roaming\npm\npm.CMD Watchman: 4.9.4 - G:\Users\ASUS\watchman\watchman.EXE SDKs: Android SDK: Android NDK: 19.0.5232133
Steps To Reproduce
1.UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true); 2.LayoutAnimation.spring(); 3.this.setState to Update view
Describe what you expected to happen: Render layout animation
Not all layout animations are abnormal. Only some layout animations are abnormal. Sometimes some views disappear after executing the layout animation, and then the program crashes when executed again.But normal in version 0.59.10.
Snack, code example, screenshot, or link to a repository:
adb logcat show this
0.60.4 show this The bottom cell disappeared.Then the program crashes
0.59.10 is normal