Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How you support orientation changes on FlatList without changing columns on the fly? #15944

Closed
ferrannp opened this issue Sep 14, 2017 · 6 comments
Labels
Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot.

Comments

@ferrannp
Copy link
Contributor

I remember using FlatList when it didn't have this check:

invariant(
   nextProps.numColumns === this.props.numColumns,
   'Changing numColumns on the fly is not supported. Change the key prop on FlatList when ' +
   'changing the number of columns to force a fresh render of the component.',
 );

So basically I wrapped the FlatList in a View with onLayout prop, and when the width of screen changes (from portrait <-> layout) I would change the number of columns (and some other calculations). This is not allowed now, so what it forces me to do is changing the key prop of the FlatList... This renders a completely new list, losing the scroll position and with a big delay even in production.

Any workarounds, thoughts ?

@nimeetshah0
Copy link

Did you figure out how to do it?

@pull-bot
Copy link

@facebook-github-bot no-template

@facebook-github-bot
Copy link
Contributor

Hey, thanks for reporting this issue! It looks like your description is missing some necessary information, or the list of reproduction steps is not complete. Can you please add all the details specified in the Issue Template? This is necessary for people to be able to understand and reproduce the issue being reported. I am going to close this, but feel free to open a new issue with the additional information provided. Thanks! See "What to Expect from Maintainers" to learn more.

@facebook-github-bot facebook-github-bot added the Ran Commands One of our bots successfully processed a command. label Oct 10, 2017
@Guihgo
Copy link

Guihgo commented Jan 4, 2018

export default class Jogar extends Component<{}> {

prepData = () => {
let data = []
for (let i = 1; i <= 30; i++) {
data.push({
key: i,
checked: false,
n: i
})
}
return data
}

renderItem = ({ item }) => {
return (
{item.n}
)
}

onLayout(e) {
const {width, height} = Dimensions.get('window');

this.setState({
    numColumnsBotoesNumeroCirculado: parseInt(width/this.espacoUmBotao)
});

}

constructor(props) {
super(props);

const {width, height} = Dimensions.get('window');
let botaoNumeroCirculadoWidth = 45;
let botaoNumeroCirculadoMargin = 10;
this.espacoUmBotao = (2*botaoNumeroCirculadoMargin)+botaoNumeroCirculadoWidth;

let mNumerosData = [];
for(let i=1; i<=30; i++) {
  let numero = {
    checked: false,
    n: i
  };
  mNumerosData.push(numero);
}

this.state = {
  numerosData: mNumerosData,
  numColumnsBotoesNumeroCirculado: 1
}

}

render() {
const { params } = this.props.navigation.state;
//params.data.titulo

return (
  <LinearGradientBg>
    <View style={styles.container} onLayout={this.onLayout.bind(this)}>
      <Text style={styles.tvEscolhaOsNumeros}>Escolha seus números</Text>
    </View>
    <FlatList
      data={this.prepData()}
      renderItem={this.renderItem}
      numColumns={this.state.numColumnsBotoesNumeroCirculado}
      initialNumToRender={5}
    />
  </LinearGradientBg>
);

}
}

@cyphire
Copy link

cyphire commented Jan 10, 2018

Having same issue. Don't understand why, I am re-rendering the child with the FlatList with a new number of columns. Is there some magic to work around this?

@xstable
Copy link

xstable commented Jul 27, 2018

Sombody suggest do use extraData property of Flatlist to let Flatlist notice, that something changed.

But this didn't work for me, here is what work for me:
Use key={this.state.orientation} while orientation e.g is "portrait" or "landscape"... it can be everything you want, but it had to change, if orientation changed.

@facebook facebook locked as resolved and limited conversation to collaborators Oct 10, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Oct 10, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

8 participants