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 |
|
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 |
|
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 |
|
export function animate() {
LayoutAnimation.configureNext(CONFIG);
}
Example #4
| Source File: Animation.tsx From RNChallenge_2 with MIT License | 5 votes |
|
export function infoAnimate() {
LayoutAnimation.configureNext(infoConfig);
}
Example #5
| Source File: Animated2DWithGradient.tsx From react-native-gifted-charts with MIT License | 4 votes |
|
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 |
|
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 |
|
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 |
|
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>
);
}
