Skip to content
react-native-strx v1.0.0-beta.1

Components & app

Custom components

Give any component the animate prop with createStrxComponent.

createStrxComponent wraps a component so it accepts animate and the other STRX props, while keeping its own props and style type.

1import { createStrxComponent } from "react-native-strx";2import { SafeAreaView } from "react-native-safe-area-context";34const StrxSafeAreaView = createStrxComponent(SafeAreaView, {5  displayName: "Strx.SafeAreaView",6});78<StrxSafeAreaView animate="fade-in layout-linear" style={{ flex: 1 }} />;

The wrapped component gets every STRX feature: entrances, keyframes, exit:, transition-*, layout transitions and inheritance, playback, and strxId for timelines.

Signature

1function createStrxComponent<Props extends object, RefType = unknown>(2  Component: React.ComponentType<Props>,3  options?: StrxComponentOptions,4): React.ForwardRefExoticComponent<StrxComponentProps<Props> & React.RefAttributes<RefType>>;
OptionTypeDefaultMeaning
displayName
string
Strx.<ComponentName>
Name shown in React DevTools
nativeView
boolean
true
Whether the component renders a native view that could be flattened away. STRX then sets collapsable={false} so animations target a real view. Use false for text-like components.

StrxComponentProps<Props> is the original props, with style kept as the component's own style type, plus animate, playback, interval, strxId, layoutClip and layoutPropagation.

Requirements for the wrapped component

The wrapped component goes through Reanimated's createAnimatedComponent, so:

  • it must pass its style prop to a native view (animated values are written there);
  • for layout and exit animations, its root should be that native view;
  • define the wrapped component once, at module scope, not inside a render function.

Refs are forwarded: a ref on the STRX component reaches the wrapped component.

Examples

A gradient

1import { LinearGradient } from "expo-linear-gradient";23const StrxGradient = createStrxComponent(LinearGradient);45<StrxGradient6  colors={["#3552f0", "#7b93ff"]}7  animate="fade-in, scale-in duration-500"8  style={{ height: 160, borderRadius: 20 }}9/>;

Your own card

1type CardProps = { title: string; style?: StyleProp<ViewStyle>; children?: React.ReactNode };23function CardBase({ title, style, children }: CardProps) {4  return (5    <View style={[styles.card, style]}>6      <Text style={styles.title}>{title}</Text>7      {children}8    </View>9  );10}1112export const Card = createStrxComponent(CardBase, { displayName: "Card" });1314<Card title="Profile" animate="fade-in from:translate-y-12 layout-spring" />;

A text-like component

const StrxHeading = createStrxComponent(Heading, { nativeView: false });

In a timeline

Wrapped components work as Strx.Timeline children and useTimeline targets:

1<Strx.Timeline playback="stagger" interval={60}>2  <Card title="One" animate="fade-in from:translate-y-12" />3  <Card title="Two" animate="fade-in from:translate-y-12" />4</Strx.Timeline>

Lists

For list rows, wrapping each row's content in Strx.View is usually simpler than wrapping FlatList itself. See Long lists.

Edit this page on GitHub

Esc