jQuery Animate Works on ids but not on classes

jQuery Animate Works on ids but not on classes - jquery-animate

I have four divs that are absolutely positioned over a bxSlider div. These four dive are supposed to expand to 20px width, then shrink to 0 px width, pause, change color and repeat.
I assigned each div an id and a common class for the set. When I ran my jQuery against the class, the color changed a couple of times and then failed to change any more. But when I converted the same code to run against the ids, it executes perfectly.
My jQuery code is:
script type="text/javascript">
jQuery(document).ready(function(){
bar1LoopBus();
});
function bar1LoopBus() {
jQuery("#bar1").css("background", "#00b2e3" );
jQuery("#bar1").animate({ width: '20px' }, 2000 );
jQuery("#bar1").animate({ width: '0px' }, 2000 );
jQuery("#bar1").animate({ width: '0px' }, 2000 , bar1LoopDes );
}
function bar1LoopDes() {
jQuery("#bar1").css("background", "#9c603e" );
jQuery("#bar1").animate({ width: '20px' }, 2000 );
jQuery("#bar1").animate({ width: '0px' }, 2000 );
jQuery("#bar1").animate({ width: '0px' }, 2000 , bar1LoopSus );
}
function bar1LoopSus() {
jQuery("#bar1").css("background", "#a0b943" );
jQuery("#bar1").animate({ width: '20px' }, 2000 );
jQuery("#bar1").animate({ width: '0px' }, 2000 );
jQuery("#bar1").animate({ width: '0px' }, 2000 , bar1LoopInn );
}
function bar1LoopInn() {
jQuery("#bar1").css("background", "#cc0001" );
jQuery("#bar1").animate({ width: '20px' }, 2000 );
jQuery("#bar1").animate({ width: '0px' }, 2000 );
jQuery("#bar1").animate({ width: '0px' }, 2000 , bar1LoopTec );
}
function bar1LoopTec() {
jQuery("#bar1").css("background", "#f6821f" );
jQuery("#bar1").animate({ width: '20px' }, 2000 );
jQuery("#bar1").animate({ width: '0px' }, 2000 );
jQuery("#bar1").animate({ width: '0px' }, 2000 , bar1LoopBus );
}
</script>
And my divs code is:
<div id="bars">
<div id="bar1" class="slidebar"></div>
<div id="bar2" class="slidebar"></div>
<div id="bar3" class="slidebar"></div>
<div id="bar4" class="slidebar"></div>
</div>
As it stands now, I have to run the whole jQuery code four times, once for each div. This seems like a lot of waste, but as I said, if I try to run it once with the class instead of the ids the color changes two or three times, and then stays stuck on the one color. The width changes continue to happen as expected.
[edit = adding full code per request]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0047)http://www.pldainteriors.com/index.asp?pageid=1 -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>PLDA Interiors</title>
<script src="./PLDA Interiors_files/AC_RunActiveContent.js" type="text/javascript"></script>
<link href="slider.css" rel="stylesheet" type="text/css">
<link href="./PLDA Interiors_files/homestyle.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="http://bxslider.com/sites/default/files/jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function(){
jQuery('#headerslider').bxSlider({
mode: 'fade',
auto: true,
autoControls: false,
controls: false,
speed: 4000
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
textLoopBus();
});
function textLoopBus() {
jQuery("#ts-business").animate({ width: '120px' }, 2000 );
jQuery("#ts-business").animate({ width: '0px' }, 2000 );
jQuery("#ts-business").animate({ width: '0px' }, 2000 , textLoopDes );
}
function textLoopDes() {
jQuery("#ts-design").animate({ width: '120px' }, 2000 );
jQuery("#ts-design").animate({ width: '0px' }, 2000 );
jQuery("#ts-design").animate({ width: '0px' }, 2000 , textLoopSus );
}
function textLoopSus() {
jQuery("#ts-sustainability").animate({ width: '120px' }, 2000 );
jQuery("#ts-sustainability").animate({ width: '0px' }, 2000 );
jQuery("#ts-sustainability").animate({ width: '0px' }, 2000 , textLoopInn );
}
function textLoopInn() {
jQuery("#ts-innovation").animate({ width: '120px' }, 2000 );
jQuery("#ts-innovation").animate({ width: '0px' }, 2000 );
jQuery("#ts-innovation").animate({ width: '0px' }, 2000 , textLoopTec );
}
function textLoopTec() {
jQuery("#ts-technology").animate({ width: '120px' }, 2000 );
jQuery("#ts-technology").animate({ width: '0px' }, 2000 );
jQuery("#ts-technology").animate({ width: '0px' }, 2000 , textLoopBus );
}
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
bar1LoopBus();
});
function bar1LoopBus() {
jQuery("#bar1").css("background", "#00b2e3" );
jQuery("#bar1").animate({ width: '20px' }, 2000 );
jQuery("#bar1").animate({ width: '0px' }, 2000 );
jQuery("#bar1").animate({ width: '0px' }, 2000 , bar1LoopDes );
}
function bar1LoopDes() {
jQuery("#bar1").css("background", "#9c603e" );
jQuery("#bar1").animate({ width: '20px' }, 2000 );
jQuery("#bar1").animate({ width: '0px' }, 2000 );
jQuery("#bar1").animate({ width: '0px' }, 2000 , bar1LoopSus );
}
function bar1LoopSus() {
jQuery("#bar1").css("background", "#a0b943" );
jQuery("#bar1").animate({ width: '20px' }, 2000 );
jQuery("#bar1").animate({ width: '0px' }, 2000 );
jQuery("#bar1").animate({ width: '0px' }, 2000 , bar1LoopInn );
}
function bar1LoopInn() {
jQuery("#bar1").css("background", "#cc0001" );
jQuery("#bar1").animate({ width: '20px' }, 2000 );
jQuery("#bar1").animate({ width: '0px' }, 2000 );
jQuery("#bar1").animate({ width: '0px' }, 2000 , bar1LoopTec );
}
function bar1LoopTec() {
jQuery("#bar1").css("background", "#f6821f" );
jQuery("#bar1").animate({ width: '20px' }, 2000 );
jQuery("#bar1").animate({ width: '0px' }, 2000 );
jQuery("#bar1").animate({ width: '0px' }, 2000 , bar1LoopBus );
}
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
bar2LoopBus();
});
function bar2LoopBus() {
jQuery("#bar2").css("background", "#00b2e3" );
jQuery("#bar2").animate({ width: '20px' }, 2000 );
jQuery("#bar2").animate({ width: '0px' }, 2000 );
jQuery("#bar2").animate({ width: '0px' }, 2000 , bar2LoopDes );
}
function bar2LoopDes() {
jQuery("#bar2").css("background", "#9c603e" );
jQuery("#bar2").animate({ width: '20px' }, 2000 );
jQuery("#bar2").animate({ width: '0px' }, 2000 );
jQuery("#bar2").animate({ width: '0px' }, 2000 , bar2LoopSus );
}
function bar2LoopSus() {
jQuery("#bar2").css("background", "#a0b943" );
jQuery("#bar2").animate({ width: '20px' }, 2000 );
jQuery("#bar2").animate({ width: '0px' }, 2000 );
jQuery("#bar2").animate({ width: '0px' }, 2000 , bar2LoopInn );
}
function bar2LoopInn() {
jQuery("#bar2").css("background", "#cc0001" );
jQuery("#bar2").animate({ width: '20px' }, 2000 );
jQuery("#bar2").animate({ width: '0px' }, 2000 );
jQuery("#bar2").animate({ width: '0px' }, 2000 , bar2LoopTec );
}
function bar2LoopTec() {
jQuery("#bar2").css("background", "#f6821f" );
jQuery("#bar2").animate({ width: '20px' }, 2000 );
jQuery("#bar2").animate({ width: '0px' }, 2000 );
jQuery("#bar2").animate({ width: '0px' }, 2000 , bar2LoopBus );
}
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
bar3LoopBus();
});
function bar3LoopBus() {
jQuery("#bar3").css("background", "#00b2e3" );
jQuery("#bar3").animate({ width: '20px' }, 2000 );
jQuery("#bar3").animate({ width: '0px' }, 2000 );
jQuery("#bar3").animate({ width: '0px' }, 2000 , bar3LoopDes );
}
function bar3LoopDes() {
jQuery("#bar3").css("background", "#9c603e" );
jQuery("#bar3").animate({ width: '20px' }, 2000 );
jQuery("#bar3").animate({ width: '0px' }, 2000 );
jQuery("#bar3").animate({ width: '0px' }, 2000 , bar3LoopSus );
}
function bar3LoopSus() {
jQuery("#bar3").css("background", "#a0b943" );
jQuery("#bar3").animate({ width: '20px' }, 2000 );
jQuery("#bar3").animate({ width: '0px' }, 2000 );
jQuery("#bar3").animate({ width: '0px' }, 2000 , bar3LoopInn );
}
function bar3LoopInn() {
jQuery("#bar3").css("background", "#cc0001" );
jQuery("#bar3").animate({ width: '20px' }, 2000 );
jQuery("#bar3").animate({ width: '0px' }, 2000 );
jQuery("#bar3").animate({ width: '0px' }, 2000 , bar3LoopTec );
}
function bar3LoopTec() {
jQuery("#bar3").css("background", "#f6821f" );
jQuery("#bar3").animate({ width: '20px' }, 2000 );
jQuery("#bar3").animate({ width: '0px' }, 2000 );
jQuery("#bar3").animate({ width: '0px' }, 2000 , bar3LoopBus );
}
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
bar4LoopBus();
});
function bar4LoopBus() {
jQuery("#bar4").css("background", "#00b2e3" );
jQuery("#bar4").animate({ width: '20px' }, 2000 );
jQuery("#bar4").animate({ width: '0px' }, 2000 );
jQuery("#bar4").animate({ width: '0px' }, 2000 , bar4LoopDes );
}
function bar4LoopDes() {
jQuery("#bar4").css("background", "#9c603e" );
jQuery("#bar4").animate({ width: '20px' }, 2000 );
jQuery("#bar4").animate({ width: '0px' }, 2000 );
jQuery("#bar4").animate({ width: '0px' }, 2000 , bar4LoopSus );
}
function bar4LoopSus() {
jQuery("#bar4").css("background", "#a0b943" );
jQuery("#bar4").animate({ width: '20px' }, 2000 );
jQuery("#bar4").animate({ width: '0px' }, 2000 );
jQuery("#bar4").animate({ width: '0px' }, 2000 , bar4LoopInn );
}
function bar4LoopInn() {
jQuery("#bar4").css("background", "#cc0001" );
jQuery("#bar4").animate({ width: '20px' }, 2000 );
jQuery("#bar4").animate({ width: '0px' }, 2000 );
jQuery("#bar4").animate({ width: '0px' }, 2000 , bar4LoopTec );
}
function bar4LoopTec() {
jQuery("#bar4").css("background", "#f6821f" );
jQuery("#bar4").animate({ width: '20px' }, 2000 );
jQuery("#bar4").animate({ width: '0px' }, 2000 );
jQuery("#bar4").animate({ width: '0px' }, 2000 , bar4LoopBus );
}
</script>
</head>
<body>
<div id="container">
<div id="homeheader">
<div id="homemenu">
<ul>
<li>Home</li>
<li>Projects</li>
<li>Services</li>
<li>About</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<img src="images/plda.jpg" alt="plda interiors" id="pldalogo" />
<div id="headerslider">
<div id="slider-one" class="mainslide">
</div>
<div id="slider-two" class="mainslide">
</div>
<div id="slider-three" class="mainslide">
</div>
<div id="slider-four" class="mainslide">
</div>
<div id="slider-five" class="mainslide">
</div>
</div><!-- #headerslider -->
<div id="bars">
<div id="bar1" class="slidebar"></div>
<div id="bar2" class="slidebar"></div>
<div id="bar3" class="slidebar"></div>
<div id="bar4" class="slidebar"></div>
</div>
<div style="height:1px;margin-bottom:2px;clear:both;"></div>
<div id="change">
<div style="float:left;margin-left:180px;margin-right:60px">
<img src="images/change.jpg" />
</div>
<div style="float:left;">
<div id="changeslide">
<div class="textslide" id="ts-business">
<img src="images/business.jpg" />
</div>
<div class="textslide" id="ts-design">
<img src="images/design.jpg" />
</div>
<div class="textslide" id="ts-sustainability">
<img src="images/sustainability.jpg" />
</div>
<div class="textslide" id="ts-innovation">
<img src="images/innovation.jpg" />
</div>
<div class="textslide" id="ts-technology">
<img src="images/technology.jpg" />
</div>
</div><!-- #changeslide -->
<img src="images/designchangeslives.jpg" style="margin-top:24px;" />
</div>
</div>
</div>
<div>
body copy
</div>
<div id="footer">
<div id="footerleft">
<div id="copyright">Copyright © 2009, PLDA, Inc.</div>
<div id="tagline">Interior Design/Interior Architecture</div>
</div>
<div id="contactdetails">
<span>914 St. Paul Street, Baltimore, Maryland 21202 </span>
<span><em>t</em> 410.234.8998 </span>
<span><em>f</em> 410.234.0614 </span>
</div>
</div>
</div>
</body></html>

i can't understand, what is your problem :)
<html>
<head>
<title>Offline</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<style>
.slidebar {
width: 200px;
height: 20px;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
bar1LoopBus();
});
function bar1LoopBus() {
jQuery(".bar1").css("background", "#00b2e3" );
jQuery(".bar1").animate({ width: '20px' }, 2000 );
jQuery(".bar1").animate({ width: '0px' }, 2000 );
jQuery(".bar1").animate({ width: '0px' }, 2000 , bar1LoopDes );
}
function bar1LoopDes() {
jQuery("#bar1").css("background", "#9c603e" );
jQuery("#bar1").animate({ width: '20px' }, 2000 );
jQuery("#bar1").animate({ width: '0px' }, 2000 );
jQuery("#bar1").animate({ width: '0px' }, 2000 , bar1LoopSus );
}
function bar1LoopSus() {
jQuery("#bar1").css("background", "#a0b943" );
jQuery("#bar1").animate({ width: '20px' }, 2000 );
jQuery("#bar1").animate({ width: '0px' }, 2000 );
jQuery("#bar1").animate({ width: '0px' }, 2000 , bar1LoopInn );
}
function bar1LoopInn() {
jQuery("#bar1").css("background", "#cc0001" );
jQuery("#bar1").animate({ width: '20px' }, 2000 );
jQuery("#bar1").animate({ width: '0px' }, 2000 );
jQuery("#bar1").animate({ width: '0px' }, 2000 , bar1LoopTec );
}
function bar1LoopTec() {
jQuery("#bar1").css("background", "#f6821f" );
jQuery("#bar1").animate({ width: '20px' }, 2000 );
jQuery("#bar1").animate({ width: '0px' }, 2000 );
jQuery("#bar1").animate({ width: '0px' }, 2000 , bar1LoopBus );
}
</script>
</head>
<body>
<div id="bars">
<div id="bar1" class="slidebar bar1"></div>
<div id="bar2" class="slidebar"></div>
<div id="bar3" class="slidebar"></div>
<div id="bar4" class="slidebar"></div>
</div>
</body>
</html>

I'm not entirely sure where you're going wrong. I think what you're asking for help with is getting the animations to work on $('.slidebar') instead of $('#bar1') etc. In case you didn't know, the convention is .class and #id. Here is a fiddle with what you want if I understand your question correctly. I changed the widths and removed everything not directly related to the bars. I noticed that the bars had zero height due to having no content so I added a non-breaking space. You could also add .slidebar { height: <someheight>; } to your css somewhere. If this does not solve your issues, please elaborate in a comment and I will do my best.

copy in a html file and try this code:
<html>
<head>
<title>Offline</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<style>
.slidebar {
width: 200px;
height: 20px;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
bar1LoopBus();
});
function bar1LoopBus() {
jQuery(".bar1").css("background", "#00b2e3" );
jQuery(".bar1").animate({ width: '20px' }, 2000 );
jQuery(".bar1").animate({ width: '0px' }, 2000 );
jQuery(".bar1").animate({ width: '0px' }, 2000 , bar1LoopDes );
}
function bar1LoopDes() {
jQuery(".bar1").css("background", "#9c603e" );
jQuery(".bar1").animate({ width: '20px' }, 2000 );
jQuery(".bar1").animate({ width: '0px' }, 2000 );
jQuery(".bar1").animate({ width: '0px' }, 2000 , bar1LoopSus );
}
function bar1LoopSus() {
jQuery(".bar1").css("background", "#a0b943" );
jQuery(".bar1").animate({ width: '20px' }, 2000 );
jQuery(".bar1").animate({ width: '0px' }, 2000 );
jQuery(".bar1").animate({ width: '0px' }, 2000 , bar1LoopInn );
}
function bar1LoopInn() {
jQuery(".bar1").css("background", "#cc0001" );
jQuery(".bar1").animate({ width: '20px' }, 2000 );
jQuery(".bar1").animate({ width: '0px' }, 2000 );
jQuery(".bar1").animate({ width: '0px' }, 2000 , bar1LoopTec );
}
function bar1LoopTec() {
jQuery(".bar1").css("background", "#f6821f" );
jQuery(".bar1").animate({ width: '20px' }, 2000 );
jQuery(".bar1").animate({ width: '0px' }, 2000 );
jQuery(".bar1").animate({ width: '0px' }, 2000 , bar1LoopBus );
}
</script>
</head>
<body>
<div id="bars">
<div id="bar1" class="slidebar bar1"></div>
<hr />
<div id="bar2" class="slidebar bar1"></div>
<hr />
<div id="bar3" class="slidebar bar1"></div>
<hr />
<div id="bar4" class="slidebar bar1"></div>
</div>
</body>
</html>

Related

React native Flatlist does not scroll inside the custom Animated Bottom sheet

I have created one custom Animated bottom sheet. User can move the bottom sheet scroll up and down. Inside my bottom sheet, I have used flatList where I fetched the data and render the items as a card. Up-till now everything works as expected but I had an issue Flatlist scrolling. Inside the bottom sheet the Flat-list does not scroll. I have made hard coded height value 2000px, which is really practice and also FlatList's contentContainerStyle added hard coded paddingBottom 2000(also another bad practice). I want to scroll the FlatList based on Flex-box. I don't know how to fix this issue.
I share my code on expo-snacks
This is my all code
import React, { useState, useEffect } from "react";
import {
StyleSheet,
Text,
View,
Dimensions,
useWindowDimensions,
SafeAreaView,
RefreshControl,
Animated,
Button,
FlatList,
} from "react-native";
import MapView from "react-native-maps";
import styled from "styled-components";
import {
PanGestureHandler,
PanGestureHandlerGestureEvent,
TouchableOpacity,
} from "react-native-gesture-handler";
const { width } = Dimensions.get("screen");
const initialRegion = {
latitudeDelta: 15,
longitudeDelta: 15,
latitude: 60.1098678,
longitude: 24.7385084,
};
const api =
"http://open-api.myhelsinki.fi/v1/events/?distance_filter=60.1699%2C24.9384%2C10&language_filter=en&limit=50";
export default function App() {
const { height } = useWindowDimensions();
const [translateY] = useState(new Animated.Value(0));
const [event, setEvent] = useState([]);
const [loading, setLoading] = useState(false);
// This is Fetch Dtata
const fetchData = async () => {
try {
setLoading(true);
const response = await fetch(api);
const data = await response.json();
setEvent(data.data);
setLoading(false);
} catch (error) {
console.log("erro", error);
}
};
useEffect(() => {
fetchData();
}, []);
// Animation logic
const bringUpActionSheet = () => {
Animated.timing(translateY, {
toValue: 0,
duration: 500,
useNativeDriver: true,
}).start();
};
const closeDownBottomSheet = () => {
Animated.timing(translateY, {
toValue: 1,
duration: 500,
useNativeDriver: true,
}).start();
};
const bottomSheetIntropolate = translateY.interpolate({
inputRange: [0, 1],
outputRange: [-height / 2.4 + 50, 0],
});
const animatedStyle = {
transform: [
{
translateY: bottomSheetIntropolate,
},
],
};
const gestureHandler = (e: PanGestureHandlerGestureEvent) => {
if (e.nativeEvent.translationY > 0) {
closeDownBottomSheet();
} else if (e.nativeEvent.translationY < 0) {
bringUpActionSheet();
}
};
return (
<>
<MapView style={styles.mapStyle} initialRegion={initialRegion} />
<PanGestureHandler onGestureEvent={gestureHandler}>
<Animated.View
style={[styles.container, { top: height * 0.7 }, animatedStyle]}
>
<SafeAreaView style={styles.wrapper}>
<ContentConatiner>
<Title>I am scroll sheet</Title>
<HeroFlatList
data={event}
refreshControl={
<RefreshControl
enabled={true}
refreshing={loading}
onRefresh={fetchData}
/>
}
keyExtractor={(_, index) => index.toString()}
renderItem={({ item, index }) => {
const image = item?.description.images.map((img) => img.url);
const startDate = item?.event_dates?.starting_day;
return (
<EventContainer key={index}>
<EventImage
source={{
uri:
image[0] ||
"https://res.cloudinary.com/drewzxzgc/image/upload/v1631085536/zma1beozwbdc8zqwfhdu.jpg",
}}
/>
<DescriptionContainer>
<Title ellipsizeMode="tail" numberOfLines={1}>
{item?.name?.en}
</Title>
<DescriptionText>
{item?.description?.intro ||
"No description available"}
</DescriptionText>
<DateText>{startDate}</DateText>
</DescriptionContainer>
</EventContainer>
);
}}
/>
</ContentConatiner>
</SafeAreaView>
</Animated.View>
</PanGestureHandler>
</>
);
}
const styles = StyleSheet.create({
container: {
position: "absolute",
top: 0,
left: 0,
right: 0,
backgroundColor: "white",
shadowColor: "black",
shadowOffset: {
height: -6,
width: 0,
},
shadowOpacity: 0.1,
shadowRadius: 5,
borderTopEndRadius: 15,
borderTopLeftRadius: 15,
},
mapStyle: {
width: width,
height: 800,
},
});
const HeroFlatList = styled(FlatList).attrs({
contentContainerStyle: {
padding: 14,
flexGrow: 1, // IT DOES NOT GROW
paddingBottom: 2000, // BAD PRACTICE
},
height: 2000 /// BAD PRACTICE
})``;
const ContentConatiner = styled.View`
flex: 1;
padding: 20px;
background-color: #fff;
`;
const Title = styled.Text`
font-size: 16px;
font-weight: 700;
margin-bottom: 5px;
`;
const DescriptionText = styled(Title)`
font-size: 14px;
opacity: 0.7;
`;
const DateText = styled(Title)`
font-size: 14px;
opacity: 0.8;
color: #0099cc;
`;
const EventImage = styled.Image`
width: 70px;
height: 70px;
border-radius: 70px;
margin-right: 20px;
`;
const DescriptionContainer = styled.View`
width: 200px;
`;
const EventContainer = styled(Animated.View)`
flex-direction: row;
padding: 20px;
margin-bottom: 10px;
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.8);
shadow-color: #000;
shadow-opacity: 0.3;
shadow-radius: 20px;
shadow-offset: 0 10px;
`;

Here is the updated version of your code. working fine on simulator
import React, { useState, useEffect, useRef } from "react";
import {
StyleSheet,
View,
Dimensions,
SafeAreaView,
RefreshControl,
Animated,
LayoutAnimation,
} from "react-native";
import MapView from "react-native-maps";
import styled from "styled-components";
import { PanGestureHandler, FlatList } from "react-native-gesture-handler";
const { width, height } = Dimensions.get("screen");
const extendedHeight = height * 0.7;
const normalHeight = height * 0.4;
const bottomPadding = height * 0.15;
if (
Platform.OS === "android" &&
UIManager.setLayoutAnimationEnabledExperimental
) {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
const initialRegion = {
latitudeDelta: 15,
longitudeDelta: 15,
latitude: 60.1098678,
longitude: 24.7385084,
};
const api =
"http://open-api.myhelsinki.fi/v1/events/?distance_filter=60.1699%2C24.9384%2C10&language_filter=en&limit=50";
export default function App() {
const translateY = useRef(new Animated.Value(0)).current;
const [flatListHeight, setFlatListHeight] = useState(extendedHeight);
const [event, setEvent] = useState([]);
const [loading, setLoading] = useState(false);
// This is Fetch Dtata
const fetchData = async () => {
setLoading(true);
try {
const response = await fetch(api);
const json = (await response.json()).data;
setEvent(json);
} catch (error) {
console.log("erro", error);
} finally {
setLoading(false);
}
};
useEffect(() => {
fetchData();
}, []);
const bottomSheetIntropolate = translateY.interpolate({
inputRange: [0, 1],
outputRange: [-normalHeight, 0],
});
const animatedStyle = {
transform: [
{
translateY: bottomSheetIntropolate,
},
],
};
const animate = (bringDown) => {
setFlatListHeight(extendedHeight);
Animated.timing(translateY, {
toValue: bringDown ? 1 : 0,
duration: 500,
useNativeDriver: true,
}).start();
};
const onGestureEnd = (e) => {
if (e.nativeEvent.translationY > 0) {
LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
setFlatListHeight(normalHeight);
}
};
const gestureHandler = (e) => {
if (e.nativeEvent.translationY > 0) {
animate(true);
} else if (e.nativeEvent.translationY < 0) {
animate(false);
}
};
const renderItem = ({ item, index }) => {
const image = item?.description.images.map((img) => img.url);
const startDate = item?.event_dates?.starting_day;
return (
<EventContainer key={index}>
<EventImage
source={{
uri:
image[0] ||
"https://res.cloudinary.com/drewzxzgc/image/upload/v1631085536/zma1beozwbdc8zqwfhdu.jpg",
}}
/>
<DescriptionContainer>
<Title ellipsizeMode="tail" numberOfLines={1}>
{item?.name?.en}
</Title>
<DescriptionText>
{item?.description?.intro || "No description available"}
</DescriptionText>
<DateText>{startDate}</DateText>
</DescriptionContainer>
</EventContainer>
);
};
return (
<>
<MapView style={styles.mapStyle} initialRegion={initialRegion} />
<PanGestureHandler onGestureEvent={gestureHandler} onEnded={onGestureEnd}>
<Animated.View
style={[styles.container, { top: height * 0.7 }, animatedStyle]}
>
<SafeAreaView style={styles.wrapper}>
<ContentConatiner>
<Title>I am scroll sheet</Title>
<HeroFlatList
style={{ height: flatListHeight }}
data={event}
ListFooterComponent={() => (
<View style={{ height: bottomPadding }} />
)}
refreshControl={
<RefreshControl
enabled={true}
refreshing={loading}
onRefresh={fetchData}
/>
}
keyExtractor={(_, index) => index.toString()}
renderItem={renderItem}
/>
</ContentConatiner>
</SafeAreaView>
</Animated.View>
</PanGestureHandler>
</>
);
}
const styles = StyleSheet.create({
container: {
position: "absolute",
top: 0,
left: 0,
right: 0,
backgroundColor: "white",
shadowColor: "black",
shadowOffset: {
height: -6,
width: 0,
},
shadowOpacity: 0.1,
shadowRadius: 5,
borderTopEndRadius: 15,
borderTopLeftRadius: 15,
},
mapStyle: {
width: width,
height: 800,
},
});
const HeroFlatList = styled(FlatList).attrs({
contentContainerStyle: {
padding: 14,
flexGrow: 1, // IT DOES NOT GROW
},
})``;
const ContentConatiner = styled.View`
flex: 1;
padding: 20px;
background-color: #fff;
`;
const Title = styled.Text`
font-size: 16px;
font-weight: 700;
margin-bottom: 5px;
`;
const DescriptionText = styled(Title)`
font-size: 14px;
opacity: 0.7;
`;
const DateText = styled(Title)`
font-size: 14px;
opacity: 0.8;
color: #0099cc;
`;
const EventImage = styled.Image`
width: 70px;
height: 70px;
border-radius: 70px;
margin-right: 20px;
`;
const DescriptionContainer = styled.View`
width: 200px;
`;
const EventContainer = styled(Animated.View)`
flex-direction: row;
padding: 20px;
margin-bottom: 10px;
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.8);
shadow-color: #000;
shadow-opacity: 0.3;
shadow-radius: 20px;
shadow-offset: 0 10px;
`;
Things I have updated in your code
useRef instead of useState for holding animated value
Replaced inline closure with const for renderItem (this can simplify the JSX and improve the performance)
Unified your animation const to one.
Utilised onEnded prop to decrease the height of FlatList gracefully with the help of LayoutAnimation
Since you were accessing the width from Dimensions, the height can also be fetched from the same resource i.e. removed the hook
updated the translateY logic calculation and Flatlist height to percentage base
listFooterItem to provide some padding to last item
A minor update to your fetch logic

If you're not against using react-native-reanimated, then I've made a minimally modified version of your code that should do exactly what you want.
I use Reanimated's v1 compatibility API, so you don't have to install the babel transpiler or anything. It should work as-is.
https://snack.expo.dev/#switt/flatlist-scroll-reanimated
Reanimated is a better fit here, because React-Native's native Animated module cannot animate the top, bottom, width, height, etc. properties, it'd likely require setting useNativeDriver to false for what you're trying to achieve. That would lead to some performance drops/choppy frames during animation.
Here's your edited code just for convenience
import React, { useState, useEffect } from "react";
import {
StyleSheet,
Text,
View,
Dimensions,
useWindowDimensions,
SafeAreaView,
RefreshControl,
Animated,
Button,
FlatList,
ScrollView
} from "react-native";
import MapView from "react-native-maps";
import styled from "styled-components";
import {
PanGestureHandler,
PanGestureHandlerGestureEvent,
TouchableOpacity,
} from "react-native-gesture-handler";
import Reanimated, { EasingNode } from 'react-native-reanimated';
const { width } = Dimensions.get("screen");
const initialRegion = {
latitudeDelta: 15,
longitudeDelta: 15,
latitude: 60.1098678,
longitude: 24.7385084,
};
const api =
"http://open-api.myhelsinki.fi/v1/events/?distance_filter=60.1699%2C24.9384%2C10&language_filter=en&limit=50";
export default function App() {
const { height } = useWindowDimensions();
const translateY = React.useRef(new Reanimated.Value(0)).current;
const [event, setEvent] = useState([]);
const [loading, setLoading] = useState(false);
// This is Fetch Dtata
const fetchData = async () => {
try {
setLoading(true);
const response = await fetch(api);
const data = await response.json();
setEvent(data.data);
setLoading(false);
} catch (error) {
console.log("erro", error);
}
};
useEffect(() => {
fetchData();
}, []);
// Animation logic
const bringUpActionSheet = () => {
Reanimated.timing(translateY, {
toValue: 0,
duration: 500,
useNativeDriver: true,
easing: EasingNode.inOut(EasingNode.ease)
}).start();
};
const closeDownBottomSheet = () => {
Reanimated.timing(translateY, {
toValue: 1,
duration: 500,
useNativeDriver: true,
easing: EasingNode.inOut(EasingNode.ease)
}).start();
};
const bottomSheetTop = translateY.interpolate({
inputRange: [0, 1],
outputRange: [height * 0.7 - height / 2.4 + 50, height * 0.7]
});
const animatedStyle = {
top: bottomSheetTop,
bottom: 0
};
const gestureHandler = (e: PanGestureHandlerGestureEvent) => {
if (e.nativeEvent.translationY > 0) {
closeDownBottomSheet();
} else if (e.nativeEvent.translationY < 0) {
bringUpActionSheet();
}
};
return (
<>
<MapView style={styles.mapStyle} initialRegion={initialRegion} />
<PanGestureHandler onGestureEvent={gestureHandler}>
<Reanimated.View
style={[styles.container, { top: height * 0.7 }, animatedStyle]}
>
<Title>I am scroll sheet</Title>
<HeroFlatList
data={event}
refreshControl={
<RefreshControl
enabled={true}
refreshing={loading}
onRefresh={fetchData}
/>
}
keyExtractor={(_, index) => index.toString()}
renderItem={({ item, index }) => {
const image = item?.description.images.map((img) => img.url);
const startDate = item?.event_dates?.starting_day;
return (
<EventContainer key={index}>
<EventImage
source={{
uri:
image[0] ||
"https://res.cloudinary.com/drewzxzgc/image/upload/v1631085536/zma1beozwbdc8zqwfhdu.jpg",
}}
/>
<DescriptionContainer>
<Title ellipsizeMode="tail" numberOfLines={1}>
{item?.name?.en}
</Title>
<DescriptionText>
{item?.description?.intro ||
"No description available"}
</DescriptionText>
<DateText>{startDate}</DateText>
</DescriptionContainer>
</EventContainer>
);
}}
/>
</Reanimated.View>
</PanGestureHandler>
</>
);
}
const styles = StyleSheet.create({
container: {
position: "absolute",
top: 0,
left: 0,
right: 0,
backgroundColor: "white",
shadowColor: "black",
shadowOffset: {
height: -6,
width: 0,
},
shadowOpacity: 0.1,
shadowRadius: 5,
borderTopEndRadius: 15,
borderTopLeftRadius: 15,
},
mapStyle: {
width: width,
height: 800,
},
});
const HeroFlatList = styled(FlatList).attrs({
contentContainerStyle: {
paddingBottom: 50
},
// height:510,
// flex:1
})``;
const Title = styled.Text`
font-size: 16px;
font-weight: 700;
margin-bottom: 5px;
`;
const DescriptionText = styled(Title)`
font-size: 14px;
opacity: 0.7;
`;
const DateText = styled(Title)`
font-size: 14px;
opacity: 0.8;
color: #0099cc;
`;
const EventImage = styled.Image`
width: 70px;
height: 70px;
border-radius: 70px;
margin-right: 20px;
`;
const DescriptionContainer = styled.View`
width: 200px;
`;
const EventContainer = styled(Animated.View)`
flex-direction: row;
padding: 20px;
margin-bottom: 10px;
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.8);
shadow-color: #000;
shadow-opacity: 0.3;
shadow-radius: 20px;
shadow-offset: 0 10px;
`;

Finally I found the solution what I wanted. Thank you Stack-overflow community. Without your help I could not able to do that.
import React, { useState, useEffect } from "react";
import {
StyleSheet,
Text,
View,
Dimensions,
useWindowDimensions,
SafeAreaView,
RefreshControl,
Animated,
Platform
} from "react-native";
import MapView from "react-native-maps";
import styled from "styled-components";
import {
PanGestureHandler,
PanGestureHandlerGestureEvent,
TouchableOpacity,
FlatList
} from "react-native-gesture-handler";
const { width } = Dimensions.get("screen");
const IPHONE_DEVICE_START_HEIGHT = Platform.OS === 'ios' ? 0.4 : 0.6;
const initialRegion = {
latitudeDelta: 15,
longitudeDelta: 15,
latitude: 60.1098678,
longitude: 24.7385084,
};
const api =
"http://open-api.myhelsinki.fi/v1/events/?distance_filter=60.1699%2C24.9384%2C10&language_filter=en&limit=50";
export default function App() {
const { height } = useWindowDimensions();
const [translateY] = useState(new Animated.Value(0));
const [event, setEvent] = useState([]);
const [loading, setLoading] = useState(false);
// This is Fetch Dtata
const fetchData = async () => {
try {
setLoading(true);
const response = await fetch(api);
const data = await response.json();
setEvent(data.data);
setLoading(false);
} catch (error) {
console.log("erro", error);
}
};
useEffect(() => {
fetchData();
}, []);
// Animation logic
const bringUpActionSheet = () => {
Animated.timing(translateY, {
toValue: 0,
duration: 500,
useNativeDriver: false,
}).start();
};
const closeDownBottomSheet = () => {
Animated.timing(translateY, {
toValue: 1,
duration: 500,
useNativeDriver: false,
}).start();
};
const bottomSheetIntropolate = translateY.interpolate({
inputRange: [0, 1],
outputRange: [
height * 0.5 - height / 2.4 + IPHONE_DEVICE_START_HEIGHT,
height * IPHONE_DEVICE_START_HEIGHT,
],
extrapolate: 'clamp',
});
const animatedStyle = {
top: bottomSheetIntropolate,
bottom: 0,
};
const gestureHandler = (e: PanGestureHandlerGestureEvent) => {
if (e.nativeEvent.translationY > 0) {
closeDownBottomSheet();
} else if (e.nativeEvent.translationY < 0) {
bringUpActionSheet();
}
};
return (
<>
<MapView style={styles.mapStyle} initialRegion={initialRegion} />
<PanGestureHandler onGestureEvent={gestureHandler}>
<Animated.View
style={[styles.container, { top: height * 0.7 }, animatedStyle]}
>
<Title>I am scroll sheet</Title>
<HeroFlatList
data={event}
refreshControl={
<RefreshControl
enabled={true}
refreshing={loading}
onRefresh={fetchData}
/>
}
keyExtractor={(_, index) => index.toString()}
renderItem={({ item, index }) => {
const image = item?.description.images.map((img) => img.url);
const startDate = item?.event_dates?.starting_day;
return (
<EventContainer key={index}>
<EventImage
source={{
uri:
image[0] ||
"https://res.cloudinary.com/drewzxzgc/image/upload/v1631085536/zma1beozwbdc8zqwfhdu.jpg",
}}
/>
<DescriptionContainer>
<Title ellipsizeMode="tail" numberOfLines={1}>
{item?.name?.en}
</Title>
<DescriptionText>
{item?.description?.intro ||
"No description available"}
</DescriptionText>
<DateText>{startDate}</DateText>
</DescriptionContainer>
</EventContainer>
);
}}
/>
</Animated.View>
</PanGestureHandler>
</>
);
}
const styles = StyleSheet.create({
container: {
position: "absolute",
top: 0,
left: 0,
right: 0,
backgroundColor: "white",
shadowColor: "black",
shadowOffset: {
height: -6,
width: 0,
},
shadowOpacity: 0.1,
shadowRadius: 5,
borderTopEndRadius: 15,
borderTopLeftRadius: 15,
},
mapStyle: {
width: width,
height: 800,
},
});
const HeroFlatList = styled(FlatList).attrs({
contentContainerStyle: {
flexGrow:1
},
})``;
const Title = styled.Text`
font-size: 16px;
font-weight: 700;
margin-bottom: 5px;
`;
const DescriptionText = styled(Title)`
font-size: 14px;
opacity: 0.7;
`;
const DateText = styled(Title)`
font-size: 14px;
opacity: 0.8;
color: #0099cc;
`;
const EventImage = styled.Image`
width: 70px;
height: 70px;
border-radius: 70px;
margin-right: 20px;
`;
const DescriptionContainer = styled.View`
width: 200px;
`;
const EventContainer = styled(Animated.View)`
flex-direction: row;
padding: 20px;
margin-bottom: 10px;
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.8);
shadow-color: #000;
shadow-opacity: 0.3;
shadow-radius: 20px;
shadow-offset: 0 10px;
`;

Looking at your code,
You need to change
import {
PanGestureHandler,
PanGestureHandlerGestureEvent,
TouchableOpacity,
FlatList as GFlatList
} from "react-native-gesture-handler";
Import FlatList from react-native-gesture-handler and update your code as below,
const HeroFlatList = styled(GFlatList).attrs({
contentContainerStyle: {
paddingBottom: 50
},
height:510,
})``;
I have tested this on your code and it works. Please check.

keep HeroFlatList in scrollView.
<ScrollView>
<HeroFlatList
data={event}
refreshControl={
<RefreshControl
enabled={true}
refreshing={loading}
onRefresh={fetchData}
/>
}
keyExtractor={(_, index) => index.toString()}
renderItem={({ item, index }) => {
const image = item?.description.images.map((img) => img.url);
const startDate = item?.event_dates?.starting_day;
return (
<EventContainer key={index}>
<EventImage
source={{
uri:
image[0] || "https://res.cloudinary.com/drewzxzgc/image/upload/v1631085536/zma1beozwbdc8zqwfhdu.jpg",
}}
/>
<DescriptionContainer>
<Title ellipsizeMode="tail" numberOfLines={1}>
{item?.name?.en}
</Title>
<DescriptionText>
{item?.description?.intro || "No description available"}
</DescriptionText>
<DateText>{startDate}</DateText>
</DescriptionContainer>
</EventContainer>
);
}}
/>
</ScrollView>

How to add a different item to an array based on the key of an array?

I have this array that fetched from backend !
this is the array.
resultes
[
[front] [18:52:18] Object {
[front] [18:52:18] "cate_id": 1,
[front] [18:52:18] "name": "Vehicles",
[front] [18:52:18] },
[front] [18:52:18] Object {
[front] [18:52:18] "cate_id": 2,
[front] [18:52:18] "name": "Home",
[front] [18:52:18] },
[front] [18:52:18] Object {
[front] [18:52:18] "cate_id": 3,
[front] [18:52:18] "name": "Electronics",
},]
{this.state.categories.results.map((item ,key)=>(
<View key={key}>
<Text>{item.name}</Text>
</View> ))
How can add for every item.name a different icon based on the key of the array?
i tried to make an object
const CATEGORIES_TYPES = {
car: {
style: { width: 50, fontSize: 40, height: 60, color: '#f56217' }
},
home: {
style: { width: 50, fontSize: 40, height: 60, color: '#2c3e50' }
},
tv: {
style: { width: 50, fontSize: 40, height: 60, color: 'black' }
}
};
and in render:
{this.state.categories.results.map((item ,key)=>(
<View key={key}>
{CATEGORIES_TYPES[item.name] && (
<FontAwesome name={CATEGORIES_TYPES[item.name]} style={CATEGORIES_TYPES[item.name].style} />
)}
<Text>{item.name}</Text>
</View> ))
but that don't work Is this a method to add based on the key???

Use conditional rendering or have an object with the names of the icons and the name of category as their key.
const Icons = {
Home: 'home',
Electronics: 'microchip',
Vehicles: 'car',
};
Then in your render do
{this.state.categories.results.map((item, key) => (
<View key={key}>
{CATEGORIES_TYPES[item.name] && (
<FontAwesome
name={Icons[item.name]}
style={CATEGORIES_TYPES[item.name].style}
/>
)}
<Text>{item.name}</Text>
</View>
))}
also change your CATEGORIES_TYPES to look like the keys in your categories object.
const CATEGORIES_TYPES = {
Vehicles: {
style: { width: 50, fontSize: 40, height: 60, color: '#f56217' },
},
Home: {
style: { width: 50, fontSize: 40, height: 60, color: '#2c3e50' },
},
Electronics: {
style: { width: 50, fontSize: 40, height: 60, color: 'black' },
},
};
DEMO

I think this is what you want to do.
const styles = StyleSheet.create({
car: {
width: 50,
fontSize: 40,
height: 60,
color: '#f56217'
},
home: {
width: 50,
fontSize: 40,
height: 60,
color: '#2c3e50'
},
tv: {
width: 50,
fontSize: 40,
height: 60,
color: 'black'
}
});
{this.state.categories.results.map((item ,key)=>(
<View key={key}>
<FontAwesome name={item.name} style={item.name === "car" ? styles.car : item.name === "home" ? styles.home : styles.tv} />
<Text>{item.name}</Text>
</View> ))

Change all button style with theming

I want to change all button style, without having to add style one after another like that:
<Button mode="contained" style={{ backgroundColor: "#FF6766" }} >
I'm trying to do something with that:
const theme = {
...DefaultTheme,
roundness: 2,
colors: {
...DefaultTheme.colors,
primary: '#ffffff',
accent: '#f1c40f',
text: '#515151',
surface: '#FF6766',
underlineColor: 'transparent',
background: '#ffffff',
contained: '#000000',
}
};
But I don't know if it's possible here, I found this on this link: https://callstack.github.io/react-native-paper/theming.html
App.js
export default function App() {
const theme = {
...DefaultTheme,
roundness: 2,
colors: {
...DefaultTheme.colors,
primary: '#ffffff',
accent: '#f1c40f',
text: '#515151',
surface: '#FF6766',
underlineColor: 'transparent',
background: '#ffffff',
contained: '#000000',
}
};
return (
<PaperProvider theme={theme}>
<AppNavigator />
</PaperProvider>
)
}

How to change IconButton color?

How can I change the color of icon in IconButton? The color of icon in the theme (using theme designer) is black however sometimes I need to show a iconbutton in white color. The code below doesn't seem to change the color of icon to white
const iconStyle = {
root: {
color: theme.palette.white
}
};
return (
<div>
<div className={css(styles.close)}>
<IconButton iconProps={{ iconName: 'Close' }} styles={iconStyle} title="Close" ariaLabel="Close" />
</div>
<h4>{title}</h4>
<p>{narrative}</p>
{link}
</div>
);

Here is a codepen demo: https://codepen.io/vitalius1/pen/BgWmYZ
<IconButton
iconProps={{ iconName: 'Emoji2' }}
styles={{
icon: {color: 'white', fontSize: 72},
root: {
width: 100,
height: 100,
backgroundColor: 'black',
selectors: {
':hover .ms-Button-icon': {
color: 'red'
},
':active .ms-Button-icon': {
color: 'yellow'
}
}
},
rootHovered: {backgroundColor: 'black'},
rootPressed: {backgroundColor: 'black'}
}}
/>

Similar to Vitalie's answer you can do this to avoid using rootHovered: https://codepen.io/Jlovett1/pen/vYKEQQd
<IconButton
iconProps={{ iconName: 'Emoji2' }}
styles={{
icon: {color: 'white', fontSize: 72},
root: {
width: 100,
height: 100,
backgroundColor: 'black',
margin: 0,
padding: 0,
selectors: {
'& .ms-Button-icon:hover, .ms-Button-flexContainer:hover': {
backgroundColor: 'black',
color: 'red'
},
}
},
}}
/>

Expo how to navigate between screens

So I've created three separate pages within the app and I've also added a Stack Navigator from React Native, but when I click on the button the app doesn't change page. As this is my first app in React any help would be massively appreciated!
This is what my Add.js looks like;
import React from "react";
import { YellowBox } from "react-native";
import { Font } from "expo";
import Timer from "./src/screens/Timer";
import Splash from "./src/screens/Splash";
import Main from "./src/screens/Main";
import { StackNavigator, DrawerNavigator } from "react-navigation";
const DrawerNavigation = DrawerNavigator({
Timer: {
screen: Timer
},
Splash: {
screen: Splash
},
Main: {
screen: Main
}
});
const StackNavigation = StackNavigator(
{
DrawerNavigation: {
screen: DrawerNavigation`enter code here`
},
Timer: {
screen: Timer
},
Splash: {
screen: Splash
},
Main: {
screen: Main
}
},
{
headerMode: "none"
}
);
export default class App extends React.Component {
constructor() {
super();
this.state = {
fontLoaded: false
};
YellowBox.ignoreWarnings([
"Warning: componentWillMount is deprecated",
"Warning: componentWillReceiveProps is deprecated",
"Warning: componentWillUpdate is deprecated"
]);
}
async componentDidMount() {
await Font.loadAsync({
Roboto: require("./src/assets/fonts/Arial.ttf")
/*FallbackFont*/`
});
this.setState({ fontLoaded: true });
console.warn("Fallback font is being used. Please check App.js
file.");
}
render() {
return this.state.fontLoaded ? <StackNavigation /> :
<Expo.AppLoading />;
}
}
And here is the Main.js;
import React, { Component } from "react";
import Button15 from "../symbols/button15";
import { Center } from "#builderx/utils";
import Button52 from "../symbols/button52";
import { View, StyleSheet, StatusBar, Image, ScrollView } from
"react-native";
export default class Main extends Component {
render() {
return (
<View style={styles.root}>
<StatusBar
barStyle="dark-content"
style={styles.statusBar}
animated={true}
/>
<Button15
style={styles.button15}
onPress={() => {
this.props.navigation.pop();
}}
/>
<ScrollView style={styles.scrollArea} horizontal={false} />
<Center horizontal>
<Image
source={require("../assets/DLLargeDarK.jpeg")}
style={styles.image}
/>
</Center>
<Center horizontal>
<View style={styles.rect3}>
<View style={styles.rect} />
<Center horizontal>
<Button52
style={styles.button52}
onPress={() => {
this.props.navigation.push("Timer");
}}
/>
</Center>
<View style={styles.rect2} />
</View>
</Center>
<Center>
<View style={styles.rect4}>
<View style={styles.rect5} />
<Button52
style={styles.button522}
onPress={() => {
this.props.navigation.push("Timer");
}}
/>
<View style={styles.rect6} />
</View>
</Center>
<Center horizontal>
<View style={styles.rect7}>
<View style={styles.rect8} />
<Button52
style={styles.button523}
onPress={() => {
this.props.navigation.push("Timer");
}}
/>
<View style={styles.rect9} />
</View>
</Center>
<Center horizontal>
<View style={styles.rect10}>
<View style={styles.rect11} />
<Button52
style={styles.button524}
onPress={() => {
this.props.navigation.push("Timer");
}}
/>
<View style={styles.rect12} />
</View>
</Center>
</View>
);
}
}
const styles = StyleSheet.create({
root: {
backgroundColor: "#f3f4f4",
flex: 1
},
statusBar: {},
button15: {
top: 56,
left: 338,
position: "absolute",
height: 36
},
scrollArea: {
height: 608.9,
width: 374,
top: 156,
left: 0,
position: "absolute",
backgroundColor: "rgba(244,244,245,1)",
opacity: 1
},
image: {
height: 73,
width: 301,
position: "absolute",
top: "6.83%"
},
rect3: {
height: 133,
width: 347,
top: 156,
position: "absolute"
},
rect: {
top: 0,
left: "0%",
width: 347,
height: 91,
position: "absolute",
backgroundColor: "rgba(255,255,255,1)",
opacity: 1
},
button52: {
top: 91,
height: 36,
position: "absolute"
},
rect2: {
top: "95.52%",
left: "0%",
width: 347,
height: 6,
position: "absolute",
backgroundColor: "rgba(255,255,255,1)",
opacity: 1
},
rect4: {
width: 347,
height: 132,
position: "absolute"
},
rect5: {
top: 0,
left: "0%",
width: 347,
height: 91,
position: "absolute",
backgroundColor: "rgba(255,255,255,1)",
opacity: 1
},
button522: {
top: 91,
left: "37.46%",
height: 35,
position: "absolute"
},
rect6: {
top: "95.52%",
left: "0%",
width: 347,
height: 6,
position: "absolute",
backgroundColor: "rgba(255,255,255,1)",
opacity: 1
},
rect7: {
top: "61.33%",
width: 347,
height: 133,
position: "absolute"
},
rect8: {
top: 0,
left: "0%",
width: 347,
height: 91,
position: "absolute",
backgroundColor: "rgba(255,255,255,1)",
opacity: 1
},
button523: {
top: 91,
left: "37.46%",
height: 35,
position: "absolute"
},
rect9: {
top: "95.52%",
left: "0%",
width: 347,
height: 6,
position: "absolute",
backgroundColor: "rgba(255,255,255,1)",
opacity: 1
},
rect10: {
top: "81.16%",
width: 347,
height: 133,
position: "absolute"
},
rect11: {
top: 0,
left: "0%",
width: 347,
height: 91,
position: "absolute",
backgroundColor: "rgba(255,255,255,1)",
opacity: 1
},
button524: {
top: 91,
left: "37.46%",
height: 35,
position: "absolute"
},
rect12: {
top: "95.52%",
left: "0%",
width: 347,
height: 6,
position: "absolute",
backgroundColor: "rgba(255,255,255,1)",
opacity: 1
}
});

In React Navigation you need to use the navigate method instead of push
this.props.navigation.navigate("Timer");
And to go back you use the goBack method instead of pop
this.props.navigation.goBack()
Read more about the navigation prop in the docs

We Keep Coding

sql objective-c vba vb.net react-native apache vue.js tensorflow api pandas

jQuery Animate Works on ids but not on classes - jquery-animate

Related

React native Flatlist does not scroll inside the custom Animated Bottom sheet

How to add a different item to an array based on the key of an array?

Change all button style with theming

How to change IconButton color?

Expo how to navigate between screens

Categories

Resources