Closed gdoudeng closed 4 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..
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?
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.
@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.
Hey @gdoudeng why did you close the issue?
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.
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?
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.
@k3nada, can you put that into a complete example into an expo snack that crashes. See my comment above.
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.
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![Aaron Swartz](https://iplus-studio.top/gifhome_448x960_9s.gif)
0.59.10 is normal![Aaron Swartz](https://iplus-studio.top/gifhome_448x960_7s.gif)