Show a component after a certain date in react native

Question

What's the best way to render a component after a certain declared date in react native?

Not really sure on the best way to do so

Answer 1

Well, it's still just JS (or TS), so you can just:

<View>
  {(new Date("2020-09-30")) > (new Date()) ? <Component /> : null}
</View>

Which would render <Component /> if it's after 2020-09-30 , and null otherwise. That new Date() without any parameter returns current date and time.

Of course the "2020-09-30" value can be fetched from an API, a config file, or whatever suits your needs…

If you want to render the component even on the given day, not just after it, switch > for >= and set the right side of the expression to midnight:

(new Date("2020-10-12")) >= (new Date()).setHours(0, 0, 0, 0) ? <Component /> : null

If you want to account for different timezones, it's a bit more tricky and perhaps using a library like Luxon is an easiest option.

Answer 2

您可以将某个声明的日期存储在异步存储中，并在适当的渲染函数中检查它以显示/隐藏组件。