How to use react-native-pose - 7 common examples

import React from 'react';
import { StyleSheet } from 'react-native';
import { Bubble } from 'react-native-gifted-chat';
import { ThemeStatic } from '../../../theme';
import posed, { Transition } from 'react-native-pose';

const TransitionBubble = posed.View({
  enter: { opacity: 1, x: 0 },
  exit: { opacity: 0.5, x: ({ offset }) => offset }
});

const CustomBubble: React.FC = bubbleProps => {
  // @ts-ignore
  const { user: { _id: authorId }, currentMessage: { user: { _id: currentId } } } = bubbleProps;

  const offset = authorId === currentId ? 20 : -20;

  return (

import React from 'react';
import { StyleSheet, Text, View, Animated } from 'react-native';
import posed, { Transition } from 'react-native-pose';

const Box = posed.View({
  exit: {
    x: ({ delta }) => delta * 100 + 'vw',
    transition: { duration: 3000 }
  },
  preEnter: { x: ({ delta }) => -delta * 100 + 'vw' },
  enter: { rotate: '45deg', x: 0, transition: { duration: 3000 } }
});

export default class App extends React.Component {
  state = { show: false };

  componentDidMount() {
    setInterval(
      () =>
        this.setState({
          show: !this.state.show

import React from "react";
import theme from "../theme";
import { SubHeader, Paragraph, IconButton } from "../ui";
import posed from "react-native-pose";
import { TouchableWithoutFeedback, View } from "react-native";
import universalHaptic from "../haptic";
import * as Haptic from "expo-haptics";
import {
  hiddenAlerts,
  hide,
  hideMultipleAlerts,
  isNewUser,
} from "./alertstore";
import { sortBy } from "lodash";

const PopsUp = posed.View({
  full: { height: 380, paddingTop: 18, paddingBottom: 18 },
  peak: {
    height: 156,
    paddingTop: 18,
    paddingBottom: 18,
    transition: { type: "spring", stiffness: 150 },
  },
  hidden: { height: 0, paddingTop: 0, paddingBottom: 0 },
});

interface AlertViewProps {
  title: string;
  body: string;
  onHide: () => void;
}

export const newPopsUp = ({ fullHeight, hiddenHeight, popUpScale }) =>
  posed.View({
    peak: {
      height:
        Platform.OS === "ios" ? fullHeight * popUpScale : fullHeight * 0.6,
      transition: { type: "spring", duration: 200 },
    },
    peakNoBounce: {
      height:
        Platform.OS === "ios" ? fullHeight * popUpScale : fullHeight * 0.6,
      transition: { duration: 0, ease: "easeOut" },
    },
    full: {
      height: fullHeight,
      transition: { type: "spring", stiffness: 150 },
    },
    hiddenWiggle: {
      height: hiddenHeight * 1,

import { useLazyQuery } from '@apollo/react-hooks';
import React, { useContext, useEffect, useState } from 'react';
import { StyleSheet, View } from 'react-native';
import SearchUsersBanner from '../../../assets/svg/search-users.svg';
import { AppContext } from '../../context';
import { QUERY_POSTS, QUERY_SEARCH_USERS } from '../../graphql/query';
import { AnimatedSearchBar, ExploreScreenPlaceholder, Header, SearchUsersPlaceholder, SvgBanner } from '../../layout';
import { ThemeColors } from '../../types/theme';
import ExploreGrid from './components/ExploreGrid';
import UserSearchResults from './components/UserSearchResults';

import posed, { Transition } from 'react-native-pose';

const FadeView = posed.View({
  enter: { opacity: 1 },
  exit: { opacity: 0.25 }
});

const ExploreScreen: React.FC = () => {

  const { theme } = useContext(AppContext);
  const [userSearch, setUserSearch] = useState('');
  const [isSearchFocused, setIsSearchFocused] = useState(false);
  const [searchResults, setSearchResults] = useState([]);
  const [searchUsersQuery, {
    data: searchUsersQueryData,
    loading: searchUsersQueryLoading,
    called: searchUsersQueryCalled,
    error: searchUsersQueryError
  }] = useLazyQuery(QUERY_SEARCH_USERS);

import { AppContext } from '../../context';
import { Typography } from '../../theme';
import { ThemeColors } from '../../types/theme';

const { FontWeights, FontSizes } = Typography;

interface AnimatedSearchBarProps {
  value: string,
  onChangeText: (text: string) => void,
  onFocus?: any,
  onBlur?: any,
  placeholder: string,
  style?: StyleProp
};

const TransitionInput = posed(TextInput)({
  focused: { width: '75%' },
  notFocused: { width: '90%' }
});

const TransitionTouchableOpacity = posed(TouchableOpacity)({
  focused: { width: 70 },
  notFocused: { width: 0 }
});

const AnimatedSearchBar: React.FC = ({ value, onChangeText, onFocus, onBlur, placeholder, style }) => {

  const { theme } = useContext(AppContext);
  const [focused, setFocused] = useState(false);

  const onOpen = () => {
    setFocused(true);

interface AnimatedSearchBarProps {
  value: string,
  onChangeText: (text: string) => void,
  onFocus?: any,
  onBlur?: any,
  placeholder: string,
  style?: StyleProp
};

const TransitionInput = posed(TextInput)({
  focused: { width: '75%' },
  notFocused: { width: '90%' }
});

const TransitionTouchableOpacity = posed(TouchableOpacity)({
  focused: { width: 70 },
  notFocused: { width: 0 }
});

const AnimatedSearchBar: React.FC = ({ value, onChangeText, onFocus, onBlur, placeholder, style }) => {

  const { theme } = useContext(AppContext);
  const [focused, setFocused] = useState(false);

  const onOpen = () => {
    setFocused(true);
    onFocus();
  };

  const onCancel = () => {
    setFocused(false);