react-native#LayoutAnimation TypeScript Examples

The following examples show how to use react-native#LayoutAnimation. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Animation.tsx    From RNChallenge_2 with MIT License 6 votes vote down vote up
CONFIG = {
  duration: 300,
  create: {
    type: LayoutAnimation.Types.easeInEaseOut,
    property: LayoutAnimation.Properties.opacity,
  },
  update: {
    type: LayoutAnimation.Types.easeInEaseOut,
    property: LayoutAnimation.Properties.opacity,
  },
  delete: {
    type: LayoutAnimation.Types.easeInEaseOut,
    duration: 200,
    property: LayoutAnimation.Properties.opacity,
  },
}
Example #2
Source File: Animation.tsx    From RNChallenge_2 with MIT License 6 votes vote down vote up
infoConfig = {
  duration: 350,
  create: {
    type: LayoutAnimation.Types.easeIn,
    property: LayoutAnimation.Properties.scaleXY,
  },
  update: {
    type: LayoutAnimation.Types.linear,
    property: LayoutAnimation.Properties.scaleXY,
  },
  delete: {
    type: LayoutAnimation.Types.easeOut,
    duration: 300,
    property: LayoutAnimation.Properties.opacity,
  },
}
Example #3
Source File: Animation.tsx    From RNChallenge_2 with MIT License 5 votes vote down vote up
export function animate() {
  LayoutAnimation.configureNext(CONFIG);
}
Example #4
Source File: Animation.tsx    From RNChallenge_2 with MIT License 5 votes vote down vote up
export function infoAnimate() {
  LayoutAnimation.configureNext(infoConfig);
}
Example #5
Source File: Animated2DWithGradient.tsx    From react-native-gifted-charts with MIT License 4 votes vote down vote up
Animated2DWithGradient = (props: propTypes) => {
  const {
    barBackgroundPattern,
    patternId,
    barWidth,
    item,
    opacity,
    animationDuration,
    noGradient,
    noAnimation,
    containerHeight,
    maxValue,
    barMarginBottom,
  } = props;
  const [height, setHeight] = useState(noAnimation ? props.height : 2);
  const [initialRender, setInitialRender] = useState(
    noAnimation ? false : true,
  );

  useEffect(() => {
    if (!noAnimation) {
      if (initialRender) {
        setTimeout(() => layoutAppear(), 20);
      } else {
        elevate();
      }
    }
  }, [props.height]);

  const elevate = () => {
    LayoutAnimation.configureNext({
      duration: animationDuration,
      update: {type: 'linear', property: 'scaleXY'},
    });
    setHeight(props.height);
  };

  const layoutAppear = () => {
    LayoutAnimation.configureNext({
      duration: Platform.OS == 'ios' ? animationDuration : 20,
      create: {type: 'linear', property: 'opacity'},
      update: {type: 'linear', property: 'scaleXY'},
    });
    setInitialRender(false);
    setTimeout(() => elevate(), Platform.OS == 'ios' ? 10 : 100);
  };

  return (
    <>
      {!initialRender && (
        <View
          style={{
            position: 'absolute',
            bottom: 0,
            width: '100%',
            height:
              (noAnimation
                ? (Math.abs(item.value) * (containerHeight || 200)) /
                  (maxValue || 200)
                : height) - (barMarginBottom || 0),
          }}>
          <View
            style={{
              width: '100%',
              height:
                (noAnimation
                  ? (Math.abs(item.value) * (containerHeight || 200)) /
                    (maxValue || 200)
                  : height) - (barMarginBottom || 0),
            }}>
            {noGradient ? (
              <View
                style={[
                  {
                    position: 'absolute',
                    width: '100%',
                    height: '100%',
                    backgroundColor:
                      item.frontColor || props.frontColor || 'black',
                    borderRadius:
                      props.barBorderRadius || item.barBorderRadius || 0,
                  },
                  props.roundedBottom && {
                    borderBottomLeftRadius:
                      (item.barWidth || barWidth || 30) / 2,
                    borderBottomRightRadius:
                      (item.barWidth || barWidth || 30) / 2,
                  },
                  props.cappedBars && {
                    borderTopLeftRadius:
                      item.capRadius === 0
                        ? 0
                        : item.capRadius || props.capRadius || 0,
                    borderTopRightRadius:
                      item.capRadius === 0
                        ? 0
                        : item.capRadius || props.capRadius || 0,
                  },
                  props.roundedTop && {
                    borderTopLeftRadius: (item.barWidth || barWidth || 30) / 2,
                    borderTopRightRadius: (item.barWidth || barWidth || 30) / 2,
                  },
                ]}>
                {props.cappedBars && (
                  <View
                    style={{
                      position: 'absolute',
                      width: '100%',
                      height:
                        item.capThickness === 0
                          ? 0
                          : item.capThickness || props.capThickness || 6,
                      backgroundColor:
                        item.capColor || props.capColor || 'black',
                      borderTopLeftRadius:
                        item.capRadius === 0
                          ? 0
                          : item.capRadius || props.capRadius || 0,
                      borderTopRightRadius:
                        item.capRadius === 0
                          ? 0
                          : item.capRadius || props.capRadius || 0,
                    }}
                  />
                )}
              </View>
            ) : (
              <LinearGradient
                style={[
                  {
                    position: 'absolute',
                    width: '100%',
                    height: '100%',
                    borderRadius:
                      props.barBorderRadius || item.barBorderRadius || 0,
                  },
                  props.roundedBottom && {
                    borderBottomLeftRadius:
                      (item.barWidth || barWidth || 30) / 2,
                    borderBottomRightRadius:
                      (item.barWidth || barWidth || 30) / 2,
                  },
                  props.cappedBars && {
                    borderTopLeftRadius:
                      item.capRadius === 0
                        ? 0
                        : item.capRadius || props.capRadius || 0,
                    borderTopRightRadius:
                      item.capRadius === 0
                        ? 0
                        : item.capRadius || props.capRadius || 0,
                  },
                  props.roundedTop && {
                    borderTopLeftRadius: (item.barWidth || barWidth || 30) / 2,
                    borderTopRightRadius: (item.barWidth || barWidth || 30) / 2,
                  },
                ]}
                start={{x: 0, y: 0}}
                end={{x: 1, y: 1}}
                colors={[
                  item.gradientColor || props.gradientColor || 'white',
                  item.frontColor || props.frontColor || 'black',
                ]}>
                {props.cappedBars && (
                  <View
                    style={{
                      position: 'absolute',
                      width: '100%',
                      height:
                        item.capThickness === 0
                          ? 0
                          : item.capThickness || props.capThickness || 6,
                      backgroundColor:
                        item.capColor || props.capColor || 'black',
                      borderTopLeftRadius:
                        item.capRadius === 0
                          ? 0
                          : item.capRadius || props.capRadius || 0,
                      borderTopRightRadius:
                        item.capRadius === 0
                          ? 0
                          : item.capRadius || props.capRadius || 0,
                    }}
                  />
                )}
              </LinearGradient>
            )}
            {(item.barBackgroundPattern || barBackgroundPattern) && (
              <Svg>
                <Defs>
                  {item.barBackgroundPattern
                    ? item.barBackgroundPattern()
                    : barBackgroundPattern()}
                </Defs>
                <Rect
                  stroke="transparent"
                  x="1"
                  y="1"
                  width={item.barWidth || props.barWidth || 30}
                  height={
                    noAnimation
                      ? (Math.abs(item.value) * (containerHeight || 200)) /
                        (maxValue || 200)
                      : height
                  }
                  fill={`url(#${item.patternId || patternId})`}
                />
              </Svg>
            )}
          </View>
          {item.topLabelComponent && (
            <View
              style={[
                {
                  position: 'absolute',
                  top: (item.barWidth || barWidth || 30) * -1,
                  height: item.barWidth || barWidth || 30,
                  width: item.barWidth || barWidth || 30,
                  justifyContent:
                    (props.horizontal && !props.intactTopLabel) ||
                    item.value < 0
                      ? 'center'
                      : 'flex-end',
                  alignItems: 'center',
                  opacity: opacity,
                },
                item.value < 0 && {transform: [{rotate: '180deg'}]},
                props.horizontal &&
                  !props.intactTopLabel && {transform: [{rotate: '270deg'}]},
                item.topLabelContainerStyle,
              ]}>
              {item.topLabelComponent()}
            </View>
          )}
        </View>
      )}
    </>
  );
}
Example #6
Source File: index.tsx    From react-native-gifted-charts with MIT License 4 votes vote down vote up
AnimatedBar = (props: animatedBarPropTypes) => {
  const [initialRender, setInitialRender] = useState(true);
  const [height, setHeight] = useState(Platform.OS === 'ios' ? 0 : 20);

  const animationDuration = props.animationDuration || 800;

  useEffect(() => {
    if (initialRender) {
      // labelsAppear();
      // increaseOpacity();
      setTimeout(() => {
        layoutAppear();
      }, 20);
    } else {
      elevate();
    }
  }, [props.height]);

  const elevate = () => {
    LayoutAnimation.configureNext({
      duration: animationDuration,
      update: {type: 'linear', property: 'scaleY'},
    });
    setHeight(props.height);
  };

  const layoutAppear = () => {
    LayoutAnimation.configureNext({
      duration: Platform.OS == 'ios' ? animationDuration : 20,
      create: {type: 'linear', property: 'scaleY'},
      // update: { type: 'linear' }
    });
    setInitialRender(false);
    setTimeout(() => elevate(), Platform.OS == 'ios' ? 10 : 100);
  };

  const width = props.width;
  const sideWidth = props.sideWidth;

  const {barBackgroundPattern, patternId} = props;

  const showGradient = props.showGradient || false;
  const gradientColor = props.gradientColor || 'white';

  const frontColor = props.frontColor || '#fe2233';
  const sideColor = props.sideColor || '#cc2233';
  const topColor = props.topColor || '#ff4433';

  const topLabelComponent = props.topLabelComponent || null;
  const topLabelContainerStyle = props.topLabelContainerStyle || {};

  const opacity = props.opacity || 1;

  return (
    <View style={styles.container}>
      {!initialRender && (
        <View
          style={[
            styles.row,
            {opacity: opacity, position: 'absolute', bottom: 0},
            props.side === 'right' && {transform: [{rotateY: '180deg'}]},
          ]}>
          {/*******************          Top View             *****************/}
          {props.height ? (
            <>
              <View style={{position: 'absolute', top: sideWidth / -2}}>
                <TriangleCorner
                  color={topColor}
                  width={sideWidth}
                  style={{transform: [{rotate: '90deg'}], opacity: opacity}}
                />
              </View>
              <View style={{position: 'absolute', top: sideWidth / -2}}>
                <View
                  style={{
                    width: width,
                    height: (3 * width) / 4,
                    // left: width / 2,
                    backgroundColor: topColor,
                    opacity: opacity,
                  }}
                />
              </View>
              <View
                style={{
                  position: 'absolute',
                  top: sideWidth / -2,
                  left: width,
                }}>
                <TriangleCorner
                  color={topColor}
                  width={sideWidth}
                  style={{transform: [{rotate: '-90deg'}], opacity: opacity}}
                />
              </View>
            </>
          ) : null}

          {/*******************************************************************/}

          {props.height ? (
            <View style={{marginTop: sideWidth / -2}}>
              <TriangleCorner
                color={sideColor}
                width={sideWidth}
                style={{transform: [{rotate: '-90deg'}], opacity: opacity}}
              />
              <View
                style={{
                  width: sideWidth / 2,
                  height: height - sideWidth / 2, //animatedSideHeight
                  backgroundColor: sideColor,
                  opacity: opacity,
                }}
              />
              <TriangleCorner
                color={sideColor}
                width={sideWidth}
                style={{transform: [{rotate: '90deg'}], opacity: opacity}}
              />
            </View>
          ) : null}

          <View
            style={{
              width: width,
              height: height, //animatedHeight
              backgroundColor: frontColor,
              borderLeftWidth: StyleSheet.hairlineWidth,
              borderTopWidth: StyleSheet.hairlineWidth,
              borderColor: 'white',
              opacity: opacity,
            }}>
            {showGradient && (
              <LinearGradient
                style={{position: 'absolute', width: '100%', height: '100%'}}
                start={{x: 0, y: 0}}
                end={{x: 1, y: 1}}
                colors={[gradientColor, frontColor]}
              />
            )}
            {barBackgroundPattern && (
              <Svg>
                <Defs>{barBackgroundPattern()}</Defs>
                <Rect
                  stroke="transparent"
                  x="1"
                  y="1"
                  width={width || 30}
                  height={height}
                  fill={`url(#${patternId})`}
                />
              </Svg>
            )}
          </View>

          {/*******************          Top Label            *****************/}

          {topLabelComponent && (
            <View
              style={[
                {
                  position: 'absolute',
                  top: width * -2,
                  height: (width * 3) / 2,
                  width: (width * 3) / 2,
                  justifyContent: 'flex-end',
                  alignItems: 'center',
                  opacity: opacity,
                },
                props.horizontal &&
                  !props.intactTopLabel && {transform: [{rotate: '270deg'}]},
                props.side === 'right' && {transform: [{rotateY: '180deg'}]},
                topLabelContainerStyle,
              ]}>
              {topLabelComponent()}
            </View>
          )}

          {/*******************************************************************/}
        </View>
      )}
    </View>
  );
}
Example #7
Source File: ExposureInstructions.tsx    From hamagen-react-native with MIT License 4 votes vote down vote up
ExposureInstructions = ({ navigation, route }: Props) => {
  const dispatch = useDispatch();
  const {
    isRTL,
    locale,
    languages,
    externalUrls,
    strings: {
      scanHome: {
        atPlace,
        betweenHours,
        inDate,
        fromHour,
        deviceCloseTag,
        locationCloseTag
      },
      exposureInstructions: {
        title,
        editBtn,
        subTitle,
        showLess,
        showMore,
        finishBtn,
        reportSite,
        updateTitle,
        updateSubTitle,
        goIntoIsolation,
        reportIsolation,
        allInstructions,
        themInstructions,
      }
    },
  } = useSelector<Store, LocaleReducer>(state => state.locale);

  const exposures = useSelector<Store, Exposure[]>(state => state.exposures.pastExposures.filter((exposure: Exposure) => exposure.properties.wasThere));
  const [shouldShowMore, setShowMore] = useState(false);

  useEffect(() => {
    SplashScreen.hide();
    // if edit button need to be shown then Exposure Instructions don't need to persists
    AsyncStorage.setItem(INIT_ROUTE_NAME, 'ExposureInstructions');
    BackHandler.addEventListener('hardwareBackPress', () => true);

    return () => {
      BackHandler.removeEventListener('hardwareBackPress', () => true);
    };
  }, []);

  const [furtherInstructions, reportForm] = useMemo(() => {
    const relevantLocale: string = Object.keys(languages.short).includes(locale) ? locale : 'he';

    return [
      externalUrls.furtherInstructions[relevantLocale],
      externalUrls.reportForm[relevantLocale]
    ];
  }, [languages.short, locale]);

  const ExposureList = useMemo(() => exposures.map((exposure: Exposure) => {
    let ListText;

    if (exposure.properties.BLETimestamp) {
      const time = moment(exposure.properties.BLETimestamp).startOf('hour');

      const exposureDate = time.format('DD.MM.YY');
      const exposureStartHour = time.format('HH:mm');
      const exposureEndHour = time.add(1, 'hour').format('HH:mm');

      ListText = (<Text>{`${deviceCloseTag}: ${inDate} ${exposureDate} ${betweenHours} ${exposureStartHour}-${exposureEndHour}`}</Text>);
    } else {
      const { Place, fromTime } = exposure.properties;
      const time = moment();
      ListText = (<Text>{`${locationCloseTag}: ${atPlace}${Place} ${inDate} ${moment(fromTime).format('DD.MM.YY')} ${fromHour} ${moment(fromTime).format('HH:mm')}`}</Text>);
    }


    return (
      <Text style={{ fontSize: IS_SMALL_SCREEN ? 14 : 16, lineHeight: 17, marginVertical: IS_SMALL_SCREEN ? 5 : 10, letterSpacing: 0.2, textAlign: isRTL ? 'right' : 'left' }} key={exposure.properties.OBJECTID}>
        <Text bold>• </Text>
        {ListText}

      </Text>
    );
  }), [exposures, locale]);

  const renderActionButton = (icon: number, text: string, buttonText: string, action: () => void) => (
    <View style={[styles.actionButtonContainer, IS_SMALL_SCREEN ? styles.actionButtonContainerSmall : styles.actionButtonContainerBig, IS_SMALL_SCREEN && { flexDirection: isRTL ? 'row-reverse' : 'row' }]}>
      <Icon source={icon} width={22} height={35} />

      <Text style={styles.actionText}>{text}</Text>

      <TouchableOpacity style={styles.button} onPress={action}>
        <Text style={styles.buttonText} bold>{buttonText}</Text>
      </TouchableOpacity>
    </View>
  );

  const RenderHeader = useMemo(() => route.params?.update
    ? (
      <>
        <Icon source={require('../../assets/main/exposureRefresh.png')} width={86} customStyles={{ marginBottom: 15 }} />
        <Text style={styles.title} bold>{updateTitle}</Text>
        <Text style={{ marginBottom: 3 }}>{updateSubTitle}</Text>
      </>
    )
    : (
      <>
        <Text style={styles.title} bold>{title}</Text>
        <Text style={{ marginBottom: 3 }}>{subTitle}</Text>
        {shouldShowMore ? ExposureList : ExposureList.slice(0, 4)}
        {exposures.length > 4 && (
          <TouchableOpacity
            style={{
              flexDirection: isRTL ? 'row' : 'row-reverse',
              alignItems: 'center'
            }}
            onPress={() => {
              LayoutAnimation.create(
                300,
                LayoutAnimation.Types.spring,
                LayoutAnimation.Properties.scaleXY
              );
              setShowMore(!shouldShowMore);
            }}
          >
            <Icon source={require('../../assets/main/showMore.png')} width={9} height={5} customStyles={{ marginHorizontal: 7, transform: [{ rotateZ: shouldShowMore ? '180deg' : '0deg' }] }} />
            <Text style={{ color: MAIN_COLOR, fontSize: 13 }} bold>{shouldShowMore ? showLess : showMore}</Text>
          </TouchableOpacity>
        )}
      </>
    ),

  [route.params?.update, shouldShowMore]);

  return (

    <ScrollView
      bounces={false}
      contentContainerStyle={styles.subContainer}
      showsVerticalScrollIndicator={false}
    >
      {route.params?.showEdit && (
        <TouchableOpacity
          hitSlop={HIT_SLOP}
          style={{
            alignContent: 'center',
            alignItems: 'center',
            position: 'absolute',
            top: PADDING_TOP(IS_SMALL_SCREEN ? 10 : 28),
            flexDirection: isRTL ? 'row' : 'row-reverse',
            [!isRTL ? 'right' : 'left']: IS_SMALL_SCREEN ? 10 : 25,
          }}
          onPress={() => navigation.navigate('ExposureDetected')}
        >
          <Icon
            width={IS_SMALL_SCREEN ? 20 : 24}
            source={require('../../assets/main/back.png')}
            customStyles={{
              transform: [{ rotate: !isRTL ? '0deg' : '180deg' }]
            }}
          />
          <Text
            bold
            style={{
              fontSize: IS_SMALL_SCREEN ? 13 : 15,
              color: MAIN_COLOR,
              marginHorizontal: IS_SMALL_SCREEN ? 5 : 8
            }}
          >
            {editBtn}
          </Text>
        </TouchableOpacity>
      )}


      <View style={{ justifyContent: 'flex-start', alignItems: 'center' }}>

        {RenderHeader}

      </View>
      <View style={{ justifyContent: 'space-between' }}>
        <Text style={{ marginBottom: IS_SMALL_SCREEN ? 12 : 25 }} bold>{themInstructions}</Text>
        <View style={!IS_SMALL_SCREEN && { width: SCREEN_WIDTH - (23 * 2), flexDirection: isRTL ? 'row-reverse' : 'row', flexWrap: 'wrap', justifyContent: 'space-between', }}>
          {renderActionButton(require('../../assets/main/isolation.png'), goIntoIsolation, allInstructions, () => Linking.openURL(furtherInstructions))}
          {renderActionButton(require('../../assets/main/report.png'), reportIsolation, reportSite, () => Linking.openURL(reportForm))}
        </View>
        <Text
          bold
          onPress={() => {
            navigation.navigate('ScanHome');
            dispatch(moveAllToPastExposures());
            AsyncStorage.removeItem(INIT_ROUTE_NAME);
          }}
          style={{
            color: MAIN_COLOR,
            marginTop: IS_SMALL_SCREEN ? 22 : 32,
            fontSize: IS_SMALL_SCREEN ? 14 : 16
          }}
        >
          {finishBtn}
        </Text>
      </View>
    </ScrollView>

  );
}
Example #8
Source File: CommandList.tsx    From SQL-Play with GNU Affero General Public License v3.0 4 votes vote down vote up
ListItem: FC<LIProps> = props => {
  // console.log('props', props);

  const {title, description, syntax, index, setInputValue, bottomSheetRef} =
    props;

  const [currentIndex, setCurrentIndex] = useState<number | null>(null);
  const styles = useDynamicValue(dynamicStyles);

  const isDark = useDarkMode();

  const onItemPress = (index: number | null) => {
    setCurrentIndex(index === currentIndex ? null : index);
    Keyboard.dismiss();
    LayoutAnimation.configureNext(
      LayoutAnimation.create(
        150,
        LayoutAnimation.Types.easeInEaseOut,
        LayoutAnimation.Properties.opacity,
      ),
    );
  };

  const onSyntaxPress = (syntax: string) => {
    setInputValue(syntax);
    bottomSheetRef.current?.close();
  };
  return (
    <Pressable testID={ids.commandListItem} onPress={() => onItemPress(index)}>
      <View style={styles.item}>
        <View style={styles.header}>
          <Text style={styles.title}>{title}</Text>
          <Icon
            name="arrow-drop-down"
            color={'gray'}
            size={36}
            style={styles.dropDownIcon}
          />
        </View>

        <Text style={styles.description}>{description}</Text>
        {index === currentIndex && (
          <>
            {/* <Text style={styles.syntaxHeader}>Syntax</Text> */}
            <Pressable
              style={styles.codeSyntaxContainer}
              accessibilityLabel={syntax}
              accessibilityHint="copy syntax to command input"
              onPress={() => onSyntaxPress(syntax)}
            >
              <SyntaxHighlighter
                PreTag={View}
                fontSize={14}
                language="sql"
                wrapLines={true}
                style={isDark ? vs2015 : defaultStyle}
                highlighter="hljs"
              >
                {syntax}
              </SyntaxHighlighter>
            </Pressable>
            {props?.example && (
              <Text style={styles.syntaxHeader}>Examples</Text>
            )}
            {props?.example &&
              props.example.map((eg, i) => (
                <Pressable
                  key={i}
                  accessibilityHint="copy example to the command input"
                  accessibilityLabel={eg}
                  style={styles.codeSyntaxContainer}
                  testID={ids.commandListExample}
                  onPress={() => onSyntaxPress(eg)}
                >
                  {/* <ScrollView */}
                  {/*   horizontal */}
                  {/*   directionalLockEnabled */}
                  {/*   automaticallyAdjustContentInsets={false} */}
                  {/*   disableScrollViewPanResponder */}
                  {/* > */}
                  <SyntaxHighlighter
                    fontSize={14}
                    language="sql"
                    wrapLines={true}
                    PreTag={View}
                    style={isDark ? vs2015 : defaultStyle}
                    highlighter="hljs"
                  >
                    {eg}
                  </SyntaxHighlighter>
                  {/* </ScrollView> */}
                </Pressable>
              ))}
          </>
        )}
      </View>
    </Pressable>
  );
}