Launch Storyboard from Xamarin PCL using Dependency Injection Not Working - ios
I'm using dependency injection to launch Wikitude from my PCL project.
I'm using the WikitudeSDKSample. I've integrated it and it compiles.
When I run it, it shows a blank white page with the VC name at the top. It never initializes the camera or the AR. No errors.
Here's what I got so far:
[assembly: Xamarin.Forms.Dependency(typeof(AugmentedRealityImplementation))]
namespace UXDivers.Artina.Grial
{
public class AugmentedRealityImplementation : IAugmentedReality
{
public AugmentedRealityImplementation() { }
public void LaunchWikitude()
{
var storyboard = UIStoryboard.FromName("MainStoryboard_iPhone", null);
var controller = storyboard.InstantiateViewController("StoryBoardViewController");
var window = UIApplication.SharedApplication.KeyWindow;
window.RootViewController = controller;
window.MakeKeyAndVisible();
}
}
}
Here's the Wikitude View Controller Class
using System;
using CoreGraphics;
using Foundation;
using UIKit;
using CoreMedia;
using Wikitude.Architect;
namespace UXDivers.Artina.Grial
{
public partial class ExampleArchitectViewDelegate : WTArchitectViewDelegate
{
public override void InvokedURL(WTArchitectView architectView, NSUrl url)
{
Console.WriteLine ("architect view invoked url: " + url);
}
public override void DidFinishLoadNavigation(WTArchitectView architectView, WTNavigation navigation)
{
Console.WriteLine ("architect view loaded navigation: " + navigation.OriginalURL);
}
public override void DidFailToLoadNavigation(WTArchitectView architectView, WTNavigation navigation, NSError error)
{
Console.WriteLine("architect view failed to load navigation. " + error.LocalizedDescription);
}
}
public partial class WikitudeSDKExampleViewController : UIViewController
{
private WTArchitectView architectView;
private WTAuthorizationRequestManager authorizationRequestManager = new WTAuthorizationRequestManager ();
private ExampleArchitectViewDelegate architectViewDelegate = new ExampleArchitectViewDelegate ();
private WTNavigation loadingArchitectWorldNavigation = null;
private bool authorized = false;
public WikitudeSDKExampleViewController (IntPtr handle) : base (handle)
{
}
public override void DidReceiveMemoryWarning ()
{
// Releases the view if it doesn't have a superview.
base.DidReceiveMemoryWarning ();
// Release any cached data, images, etc that aren't in use.
}
#region View lifecycle
public override void ViewDidLoad ()
{
base.ViewDidLoad ();
// Perform any additional setup after loading the view, typically from a nib.
this.architectView = new Wikitude.Architect.WTArchitectView ();
this.architectView.Delegate = architectViewDelegate;
this.architectView.ShouldAuthorizeRestrictedAPIs = false;
this.View.AddSubview (this.architectView);
this.architectView.TranslatesAutoresizingMaskIntoConstraints = false;
NSDictionary views = new NSDictionary (new NSString ("architectView"), architectView);
this.View.AddConstraints (NSLayoutConstraint.FromVisualFormat("|[architectView]|", 0, null, views));
this.View.AddConstraints (NSLayoutConstraint.FromVisualFormat("V:|[architectView]|", 0, null, views));
architectView.SetLicenseKey ("qb0APVM+s+0ab+QN8CIGXAjxmetYYiCSQ6wK3mnWl31YV2BKuDT8EncCMuZcCev2rgnvaVzhU3hcfoXUv3rwCTZ7HEgNUD0Fp+qntzv7Usjf2fBuQz1HZ9IEhr7o9O5YbKdwsTdIf1wEywQKAGYmLgDwfoaaE8Bciyh7L1Xm1i1TYWx0ZWRfX4squ7p4M/QBfCETAiRlme5mizo+X1Z5K1y4xpS6JNRp+JE5aIbw4rcgF2Onp4wmQypiD9lXMpM7vv0sCDU3NGOorbw1ni/kahQpXWFxRpSnVRYu772ATIZ/JWMY7O60m0JWkA1YgSczMV4SioFGA1R2tReC1l9rQw+hN395FoV40zceQykZTlb/KPW3n3+3FlgfHXgq+A0KrCv+TfbZhAnQg6z39ED0unJXnCdIdjHve1WhUClaovbcqOGrdllxVgi/85V+RG9TerH/owLju07FS5QwPL+LuHkbQ0blPqoK7uvQv+cUSXc6Chxjn3Ht49TIiFt9ishzhxfuAvTsSg84kyO0Es+aQNwZV/anS6h1i7R9UDn8I2XXZKu5IHSGaEk7gQstVgyLdvMDOyHt4LJk/q28UCEXxIOYLTcewhQyevfgmeyV2a3VnXWEMpbIqGITf343UsxZq62WD4y/iTwbwAFTun9X058QqSS0Tn6TcXH5Ef4RmJo=");
NSNotificationCenter.DefaultCenter.AddObserver(UIApplication.DidBecomeActiveNotification, (notification) => {
StartAR();
});
NSNotificationCenter.DefaultCenter.AddObserver(UIApplication.WillResignActiveNotification, (notification) => {
StopAR();
});
}
public override void ViewWillAppear (bool animated)
{
base.ViewWillAppear (animated);
}
public override void ViewDidAppear (bool animated)
{
base.ViewDidAppear (animated);
if (!authorizationRequestManager.RequestingRestrictedAppleiOSSDKAPIAuthorization)
{
NSOrderedSet<NSNumber> restrictedAppleiOSSKDAPIs = WTAuthorizationRequestManager.RestrictedAppleiOSSDKAPIAuthorizationsForRequiredFeatures(WTFeatures.WTFeature_ImageTracking);
authorizationRequestManager.RequestRestrictedAppleiOSSDKAPIAuthorization(restrictedAppleiOSSKDAPIs, (bool success, NSError error) => {
authorized = success;
if (success)
{
StartAR();
}
else
{
handleAuthorizationError(error);
}
});
}
}
public override void ViewWillDisappear (bool animated)
{
base.ViewWillDisappear (animated);
}
public override void ViewDidDisappear (bool animated)
{
base.ViewDidDisappear (animated);
StopAR ();
}
#endregion
#region Rotation
public override void WillRotate(UIInterfaceOrientation toInterfaceOrientation, double duration)
{
base.WillRotate (toInterfaceOrientation, duration);
architectView.SetShouldRotateToInterfaceOrientation (true, toInterfaceOrientation);
}
public override bool ShouldAutorotate()
{
return true;
}
public override UIInterfaceOrientationMask GetSupportedInterfaceOrientations ()
{
return UIInterfaceOrientationMask.All;
}
#endregion
#region Segue
[Action("UnwindToMainViewController")]
public void UnwindToMainViewController()
{
}
#endregion
#region Private Methods
private void handleAuthorizationError(NSError authorizationError)
{
NSDictionary unauthorizedAPIInfo = (NSDictionary)authorizationError.UserInfo.ObjectForKey(WTAuthorizationRequestManager.WTUnauthorizedAppleiOSSDKAPIsKey);
NSMutableString detailedAuthorizationErrorLogMessage = (NSMutableString)new NSString("The following authorization states do not meet the requirements:").MutableCopy();
NSMutableString missingAuthorizations = (NSMutableString)new NSString("In order to use the Wikitude SDK, please grant access to the following:").MutableCopy();
foreach (NSString unauthorizedAPIKey in unauthorizedAPIInfo.Keys)
{
NSNumber unauthorizedAPIValue = (NSNumber)unauthorizedAPIInfo.ObjectForKey(unauthorizedAPIKey);
detailedAuthorizationErrorLogMessage.Append(new NSString("\n"));
detailedAuthorizationErrorLogMessage.Append(unauthorizedAPIKey);
detailedAuthorizationErrorLogMessage.Append(new NSString(" = "));
detailedAuthorizationErrorLogMessage.Append(WTAuthorizationRequestManager.StringFromAuthorizationStatusForUnauthorizedAppleiOSSDKAPI(unauthorizedAPIValue.Int32Value, unauthorizedAPIKey));
missingAuthorizations.Append(new NSString("\n *"));
missingAuthorizations.Append(WTAuthorizationRequestManager.HumanReadableDescriptionForUnauthorizedAppleiOSSDKAPI(unauthorizedAPIKey));
}
Console.WriteLine(detailedAuthorizationErrorLogMessage);
UIAlertController settingsAlertController = UIAlertController.Create("Required API authorizations missing", missingAuthorizations, UIAlertControllerStyle.Alert);
settingsAlertController.AddAction(UIAlertAction.Create("Open Settings", UIAlertActionStyle.Default, (UIAlertAction obj) =>
{
UIApplication.SharedApplication.OpenUrl(new NSUrl(UIApplication.OpenSettingsUrlString));
}));
settingsAlertController.AddAction(UIAlertAction.Create("NO", UIAlertActionStyle.Destructive, (UIAlertAction obj) => { }));
this.PresentViewController(settingsAlertController, true, null);
}
private void StartAR()
{
if (authorized)
{
if (!architectView.IsRunning)
{
architectView.Start((startupConfiguration) =>
{
// use startupConfiguration.CaptureDevicePosition = AVFoundation.AVCaptureDevicePosition.Front; to start the Wikitude SDK with an active front cam
startupConfiguration.CaptureDevicePosition = AVFoundation.AVCaptureDevicePosition.Back;
startupConfiguration.CaptureDeviceResolution = WTCaptureDeviceResolution.WTCaptureDeviceResolution_AUTO;
startupConfiguration.TargetFrameRate = CMTime.PositiveInfinity; // resolves to WTMakeTargetFrameRateAuto();
}, (bool isRunning, NSError startupError) => {
if (isRunning)
{
if (null == loadingArchitectWorldNavigation)
{
var path = NSBundle.MainBundle.BundleUrl.AbsoluteString + "x_Demo_2_SolarSystem(Geo)/index.html";
loadingArchitectWorldNavigation = architectView.LoadArchitectWorldFromURL(NSUrl.FromString(path), Wikitude.Architect.WTFeatures.WTFeature_ImageTracking);
}
}
else
{
Console.WriteLine("Unable to start Wikitude SDK. Error (start ar): " + startupError.LocalizedDescription);
}
});
}
architectView.SetShouldRotateToInterfaceOrientation(true, UIApplication.SharedApplication.StatusBarOrientation);
}
}
private void StopAR()
{
if (architectView.IsRunning)
{
architectView.Stop();
}
}
#endregion
}
}
Here's the iphone storyboard
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="4451" systemVersion="13A461" targetRuntime="iOS.CocoaTouch.iPad" propertyAccessControl="none" useAutolayout="YES" initialViewController="15">
<dependencies>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="3733.0"/>
</dependencies>
<scenes>
<!--class Prefix:identifier View Controller-->
<scene sceneID="tne-QT-ifu">
<objects>
<viewController id="BYZ-38-t0r" customClass="WikitudeSDKExampleViewController" sceneMemberID="viewController">
<layoutGuides>
<viewControllerLayoutGuide type="top" id="3"/>
<viewControllerLayoutGuide type="bottom" id="4"/>
</layoutGuides>
<view key="view" contentMode="scaleToFill" id="8bC-Xf-vdC">
<rect key="frame" x="0.0" y="64" width="768" height="960"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
</view>
<navigationItem title="Wikitude SDK" id="585" key="navigationItem">
<barButtonItem key="rightBarButtonItem" title="Info" id="588">
<connections>
<segue id="780" destination="599" kind="modal" modalPresentationStyle="formSheet"/>
</connections>
<color key="tintColor" colorSpace="calibratedRGB" red="1" green="0.49803921568627452" blue="0" alpha="1"/>
</barButtonItem>
</navigationItem>
<extendedEdge key="edgesForExtendedLayout" bottom="YES"/>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="-333" y="-299"/>
</scene>
<scene sceneID="14">
<objects>
<navigationController id="15" sceneMemberID="viewController">
<navigationBar key="navigationBar" contentMode="scaleToFill" id="17">
<rect key="frame" x="0.0" y="20" width="768" height="44"/>
<autoresizingMask key="autoresizingMask"/>
</navigationBar>
<connections>
<segue id="586" destination="BYZ-38-t0r" kind="relationship" relationship="rootViewController"/>
</connections>
</navigationController>
<placeholder placeholderIdentifier="IBFirstResponder" id="18" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="-1230" y="-294"/>
</scene>
<scene sceneID="589">
<objects>
<tableViewController id="590" sceneMemberID="viewController" customClass="WTSDKInformationViewController">
<tableView key="view" clipsSubviews="YES" contentMode="scaleToFill" alwaysBounceVertical="YES" dataMode="static" style="grouped" separatorStyle="default" rowHeight="44" sectionHeaderHeight="28" sectionFooterHeight="28" id="592">
<rect key="frame" x="0.0" y="0.0" width="768" height="1024"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
<connections>
<outlet property="dataSource" destination="590" id="593"/>
<outlet property="delegate" destination="590" id="594"/>
</connections>
<sections>
<tableViewSection headerTitle="SDK Information" id="605">
<cells>
<tableViewCell clipsSubviews="YES" contentMode="scaleToFill" selectionStyle="default" indentationWidth="10" id="606" rowHeight="44" style="IBUITableViewCellStyleValue1" textLabel="1061" detailTextLabel="1062">
<rect key="frame" x="0.0" y="55.5" width="768" height="44"/>
<autoresizingMask key="autoresizingMask"/>
<tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" tableViewCell="606" id="607">
<rect key="frame" x="0.0" y="0.0" width="768" height="43.5"/>
<autoresizingMask key="autoresizingMask"/>
<subviews>
<label opaque="NO" multipleTouchEnabled="YES" contentMode="left" text="Version Number:" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" id="1061">
<rect key="frame" x="48" y="12" width="128" height="20.5"/>
<autoresizingMask key="autoresizingMask"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" multipleTouchEnabled="YES" contentMode="left" text="Subtitle" textAlignment="right" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" id="1062">
<rect key="frame" x="661" y="12" width="59" height="20.5"/>
<autoresizingMask key="autoresizingMask"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
</tableViewCellContentView>
</tableViewCell>
</cells>
</tableViewSection>
<tableViewSection headerTitle="Build Information" id="612">
<cells>
<tableViewCell clipsSubviews="YES" contentMode="scaleToFill" selectionStyle="default" indentationWidth="10" id="613" rowHeight="44" style="IBUITableViewCellStyleValue1" textLabel="1063" detailTextLabel="1064">
<rect key="frame" x="0.0" y="293" width="768" height="44"/>
<autoresizingMask key="autoresizingMask"/>
<tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" tableViewCell="613" id="614">
<rect key="frame" x="0.0" y="0.0" width="768" height="43.5"/>
<autoresizingMask key="autoresizingMask"/>
<subviews>
<label opaque="NO" multipleTouchEnabled="YES" contentMode="left" text="Build Date:" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" id="1063">
<rect key="frame" x="48" y="12" width="83.5" height="20.5"/>
<autoresizingMask key="autoresizingMask"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" multipleTouchEnabled="YES" contentMode="left" text="Subtitle" textAlignment="right" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" id="1064">
<rect key="frame" x="661" y="12" width="59" height="20.5"/>
<autoresizingMask key="autoresizingMask"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
</tableViewCellContentView>
</tableViewCell>
<tableViewCell clipsSubviews="YES" contentMode="scaleToFill" selectionStyle="default" indentationWidth="10" id="615" rowHeight="44" style="IBUITableViewCellStyleValue1" textLabel="1065" detailTextLabel="1066">
<rect key="frame" x="0.0" y="337" width="768" height="44"/>
<autoresizingMask key="autoresizingMask"/>
<tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" tableViewCell="615" id="616">
<rect key="frame" x="0.0" y="0.0" width="768" height="43.5"/>
<autoresizingMask key="autoresizingMask"/>
<subviews>
<label opaque="NO" multipleTouchEnabled="YES" contentMode="left" text="Build Number:" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" id="1065">
<rect key="frame" x="48" y="12" width="109" height="20.5"/>
<autoresizingMask key="autoresizingMask"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" multipleTouchEnabled="YES" contentMode="left" text="Subtitle" textAlignment="right" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" id="1066">
<rect key="frame" x="661" y="12" width="59" height="20.5"/>
<autoresizingMask key="autoresizingMask"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
</tableViewCellContentView>
</tableViewCell>
<tableViewCell clipsSubviews="YES" contentMode="scaleToFill" selectionStyle="default" indentationWidth="10" id="617" rowHeight="44" style="IBUITableViewCellStyleValue1" textLabel="1067" detailTextLabel="1068">
<rect key="frame" x="0.0" y="381" width="768" height="44"/>
<autoresizingMask key="autoresizingMask"/>
<tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" tableViewCell="617" id="618">
<rect key="frame" x="0.0" y="0.0" width="768" height="43.5"/>
<autoresizingMask key="autoresizingMask"/>
<subviews>
<label opaque="NO" multipleTouchEnabled="YES" contentMode="left" text="Build Configuration:" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" id="1067">
<rect key="frame" x="48" y="12" width="151" height="20.5"/>
<autoresizingMask key="autoresizingMask"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" multipleTouchEnabled="YES" contentMode="left" text="Subtitle" textAlignment="right" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" id="1068">
<rect key="frame" x="661" y="12" width="59" height="20.5"/>
<autoresizingMask key="autoresizingMask"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
</tableViewCellContentView>
</tableViewCell>
</cells>
</tableViewSection>
</sections>
<color key="separatorColor" colorSpace="calibratedRGB" red="1" green="0.49803921568627452" blue="0" alpha="1"/>
</tableView>
<navigationItem key="navigationItem" title="Wikitude Xamarin Component" id="591">
<barButtonItem key="rightBarButtonItem" id="619" style="done" systemItem="done">
<color key="tintColor" colorSpace="calibratedRGB" red="1" green="0.49803921568627452" blue="0" alpha="1"/>
<connections>
<segue id="1059" destination="603" kind="unwind" unwindAction="UnwindToMainViewController"/>
</connections>
</barButtonItem>
</navigationItem>
</tableViewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="597" userLabel="First Responder" sceneMemberID="firstResponder"/>
<exit id="603" userLabel="Exit" sceneMemberID="exit"/>
</objects>
<point key="canvasLocation" x="665" y="-1542"/>
</scene>
<scene sceneID="598">
<objects>
<navigationController id="599" sceneMemberID="viewController">
<navigationBar key="navigationBar" contentMode="scaleToFill" id="601">
<rect key="frame" x="0.0" y="20" width="768" height="44"/>
<autoresizingMask key="autoresizingMask"/>
</navigationBar>
<connections>
<segue destination="590" kind="relationship" relationship="rootViewController" id="600"/>
</connections>
</navigationController>
<placeholder placeholderIdentifier="IBFirstResponder" id="602" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="-317" y="-1541"/>
</scene>
</scenes>
<simulatedMetricsContainer key="defaultSimulatedMetrics">
<simulatedStatusBarMetrics key="statusBar" statusBarStyle="blackOpaque"/>
<simulatedOrientationMetrics key="orientation"/>
<simulatedScreenMetrics key="destination"/>
</simulatedMetricsContainer>
<resources>
<image name="Default-568h.png" width="320" height="568"/>
<image name="1_ImageRecognition_1_ImageOnTarget/assets/imageOne.png" width="446" height="1024"/>
<image name="1_ImageRecognition_1_ImageOnTarget/assets/surfer.png" width="38" height="50"/>
</resources>
</document>
I deleted everything and recreated it and it worked with following code:
'public void LaunchWikitude()
{
var storyboard = UIStoryboard.FromName("MainStoryboard_iPhone", null);
var controller = storyboard.InstantiateViewController("StoryBoardViewController") as UIViewController;
var window = UIApplication.SharedApplication.KeyWindow;
window.RootViewController = controller;
window.MakeKeyAndVisible();
}'
Related
How to make boxes scroll horizontally?
I'm new to react native, and I'm trying to make a social media app. I want to make it where you can scroll vertically to view certain posts, and then scroll horizontally to see other posts by the same user. I downloaded a UI framework, and it scrolls vertically, but how would I make the posts scroll horizontally? Home.js import React from 'react'; import {View,Text,Image,ImageBackground,TouchableOpacity} from 'react-native'; import {ScrollView,TextInput} from 'react-native-gesture-handler'; import Icon from '#expo/vector-icons/Entypo'; import Posts from '../screens/Posts' export default class Home extends React.Component{ state={ popularSelected:true } onTabPressed=()=>{ this.setState({popularSelected:!this.state.popularSelected}) } render(){ return( <ScrollView showsVerticalScrollIndicator={false} style={{ height:"100%", backgroundColor:"#b5f8d9" }} > <View style={{ height:260, width:"100%", paddingHorizontal:35 }}> <View style={{ flexDirection:"row", width:"100%", paddingTop:40, alignItems:"center" }}> <View style={{ width:"50%" }}> <Image source={require('../images/Untitled.png')} style={{width:20,height:20}}/> </View> <View style={{ width:"50%", alignItems:"flex-end", }}> <Icon name = "dots-two-vertical" size={22} color="#d2d2d2" style={{ marginRight:-7, marginTop:7 }}/> </View> </View> <View> <Image source={require('../images/logoVizzey.jpg')} style={{width:200, height:80}}/> </View> {/* <Text style={{ fontFamily:"Bold", fontSize:25, color:"#FFF", paddingVertical:25 }}>Vizzey</Text> */} <View style={{ flexDirection:"row", borderColor:"#9ca1a2", borderRadius:20, borderWidth:0.2, paddingVertical:5, alignItems:"center" }}> <TextInput placeholder="search inispiration ..." style={{ paddingHorizontal:20, fontFamily:"Medium", fontSize:11, width:"90%", color:"#9ca1a2" }} /> <Icon name="magnifying-glass" size={15} color="#9ca1a2"/> </View> </View> <View style={{ backgroundColor:"#FFF", borderTopLeftRadius:40, borderTopRightRadius:40, height:1000, paddingHorizontal:35 }}> <View style={{ flexDirection:"row", paddingTop:20 }}> <TouchableOpacity onPress={this.onTabPressed} style={{ borderBottomColor:this.state.popularSelected ? "#044244":"#FFF", borderBottomWidth:4, paddingVertical:6 }} > <Text style={{ fontFamily:"Bold", color:this.state.popularSelected ? "#044244":"#9ca1a2" }}>MOST POPULAR</Text> </TouchableOpacity> <TouchableOpacity onPress={this.onTabPressed} style={{ borderBottomColor:this.state.popularSelected ? "#FFF":"#044244", borderBottomWidth:4, paddingVertical:6, marginLeft:30 }} > <Text style={{ fontFamily:"Bold", color:this.state.popularSelected ? "#9ca1a2":"#044244" }}>RECENT</Text> </TouchableOpacity> </View> <View style={{ flexDirection:"row" }}> <Posts onPress={()=>this.props.navigation.navigate('Detail')} name="Max Bator" profile={require('../images/p1.jpg')} photo={require('../images/5.jpg')} /> <View style={{ height:160, backgroundColor:"#3c636c", width:20, marginLeft:20, marginTop:120, borderTopLeftRadius:20, borderBottomLeftRadius:20 }}> </View> </View> <View style={{ flexDirection:"row" }}> <View style={{ height:160, backgroundColor:"#3c636c", width:20, marginLeft:-40, marginRight:20, marginTop:120, borderTopRightRadius:20, borderBottomRightRadius:20 }}> </View> <Posts onPress={()=>this.props.navigation.navigate('Detail')} name="Erka Berka" profile={require('../images/p2.jpg')} photo={require('../images/6.jpg')} /> </View> <View style={{ flexDirection:"row" }}> <Posts onPress={()=>this.props.navigation.navigate('Detail')} name="Max Bator" profile={require('../images/p1.jpg')} photo={require('../images/3.jpg')} /> <View style={{ height:160, backgroundColor:"#3c636c", width:20, marginLeft:20, marginTop:120, borderTopLeftRadius:20, borderBottomLeftRadius:20 }}> </View> </View> </View> </ScrollView> ) } } Posts.js import React from 'react'; import {View,Text,Image,ImagBackground, ImageBackground} from 'react-native'; import Icon from "#expo/vector-icons/Entypo" import {TouchableOpacity} from 'react-native-gesture-handler'; export default class Posts extends React.Component{ state={ liked:false } onLike=()=>{ this.setState({liked:!this.state.liked}) } render(){ const {name,profile,photo,onPress} = this.props return( <View> <View style={{ flexDirection:"row", paddingTop:25, alignItems:"center" }}> <View style={{width:"20%"}}> <Image source={profile} style={{ width:45, height:45, borderRadius:13 }} /> </View> <View style={{ width:"60%" }}> <Text style={{ fontFamily:"Bold", fontSize:14, color:"#044244" }}>{name}</Text> <Text style={{ fontFamily:"Medium", fontSize:12, color:"#9ca1a2" }}> 2 mins ago </Text> </View> <View style={{ width:"20%", alignItems:"flex-end" }}> <Icon name="sound-mix" color="#044244" size={20} /> </View> </View> <View style={{ flexDirection:"row", width:"100%", paddingTop:20 }}> <ImageBackground source={photo} style={{ width:"100%", height:220, }} imageStyle={{ borderRadius:30 }} > <View style={{ height:"100%", flexDirection:"row", alignItems:'flex-end', justifyContent:"flex-end" }}> <TouchableOpacity onPress={onPress} style={{ marginBottom:20, borderRadius:5, padding:5, backgroundColor:"#e8e8e8" }} > <Icon name="forward" color="#044244" size={20}/> </TouchableOpacity> <TouchableOpacity onPress={this.onLike} style={{ marginBottom:20, borderRadius:5, padding:5, backgroundColor:"#e8e8e8", marginLeft:10, marginRight:20 }} > <Icon name= {this.state.liked === true ? "heart":"heart-outlined"} color= {this.state.liked===true? "red":"#044244"} size={20}/> </TouchableOpacity> </View> </ImageBackground> </View> </View> ) } } Here is a picture of the UI:
Add horizontal attribute to ScrollView or any Scroll component. <ScrollView horizontal></ScrollView>
I see that you have added ImageBackground twice in your imports in post.js file to make it scroll horizontally, use the property horizontal <ScrollView horizontal > //other code goes here </ScrollView> see docs https://reactnative.dev/docs/scrollview
Xcode: ScrollView not working
I somehow can't get a Scrollview to work vertically. I created a simple ViewController with a Scrollview, that has equal width and height as Safe Area and filled it with one big label, which has also same width as safe area. But it doesn't scroll. If I don't constrain the label, I get one long line which I can scroll horizontally. Why doesn't it work vertically? <scene sceneID="PWe-2P-e7G"> <objects> <viewController id="dVm-1J-JI9" sceneMemberID="viewController"> <view key="view" contentMode="scaleToFill" id="AtX-Pv-6wj"> <rect key="frame" x="0.0" y="0.0" width="768" height="1024"/> <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/> <subviews> <scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" ambiguous="YES" showsVerticalScrollIndicator="NO" translatesAutoresizingMaskIntoConstraints="NO" id="VNx-Wi-Vg6"> <rect key="frame" x="0.0" y="0.0" width="768" height="1024"/> <subviews> <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" ambiguous="YES" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="MqU-0Y-fM2"> <rect key="frame" x="-117" y="481" width="1000.5" height="61"/> <mutableString key="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</mutableString> <fontDescription key="fontDescription" type="system" pointSize="40"/> <nil key="textColor"/> <nil key="highlightedColor"/> </label> </subviews> <constraints> <constraint firstItem="MqU-0Y-fM2" firstAttribute="top" secondItem="VNx-Wi-Vg6" secondAttribute="top" id="rFR-UU-4Jh"/> </constraints> </scrollView> </subviews> <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/> <constraints> <constraint firstItem="VNx-Wi-Vg6" firstAttribute="height" secondItem="cuD-5b-v6o" secondAttribute="height" id="5PV-lk-7KG"/> <constraint firstItem="VNx-Wi-Vg6" firstAttribute="width" secondItem="cuD-5b-v6o" secondAttribute="width" id="ZBA-5x-Gzn"/> <constraint firstItem="MqU-0Y-fM2" firstAttribute="width" secondItem="cuD-5b-v6o" secondAttribute="width" id="v3U-b4-7cx"/> </constraints> <viewLayoutGuide key="safeArea" id="cuD-5b-v6o"/> </view> </viewController> <placeholder placeholderIdentifier="IBFirstResponder" id="rsr-pH-xUO" userLabel="First Responder" sceneMemberID="firstResponder"/> </objects> <point key="canvasLocation" x="15.625" y="707.8125"/> </scene>
Your scroll view is able to scroll horizontally because the horizontal content size of the label is more than the width of the scroll view horizontally. I think your code is working perfectly fine.. To see your label working, add lots of new line characters in the label. Something like i \n am \n and so on. After the label has increased its size vertically more than the scroll view size.. it should start scrolling.
React Native: Flex for ScrollView doesn't work
I have a simple View which has two children, another View and a ScrollView. The ScrollView should be 5x higher than the View on the same level, using flexbox. <View style={{ flex: 1}}> <View style={{flex: 1, backgroundColor: 'powderblue'}}> <Text>Add new stuff</Text> <Button title="Browse Gallery" onPress={ openGallery } /> </View> <ScrollView style={{flex: 5, backgroundColor: 'skyblue'}}> <Text style={{ fontSize: 100}}>Scroll me plz</Text> <Text style={{ fontSize: 100}}>Scroll me plz</Text> </ScrollView> </View> So I simply added flex:1 and flex:5 to the children Views, but the in the rendered view both of them fit exactly to half of the screen. It looks as if the two flex attributes are ignored... Btw, using a second View instead of the ScrollView works just fine! Any ideas how to achieve the 1:5 ratio with a ScrollView?
ScrollView is a component which doesn't inherit the use of flex. What you want to do is wrap the ScrollView in a View which will create the flex ratio you desire. <View style={{flex: 1}}> <View style={{flex: 1, backgroundColor: 'powderblue'}}> <Text>Add new stuff</Text> <Button title="Browse Gallery" onPress={ openGallery } /> </View> <View style={{flex: 5}}> <ScrollView style={{backgroundColor: 'skyblue'}}> <Text style={{ fontSize: 100}}>Scroll me plz</Text> <Text style={{ fontSize: 100}}>Scroll me plz</Text> </ScrollView> </View> </View>
To achieve 1:5 screen ratio, having child component View and ScrollView with respect to parent View, you can code it in following manner: <View style={{ flex: 1}}> <View style={{flex: 1/5, backgroundColor: 'powderblue'}}> <Text>Add new stuff</Text> <Button title="Browse Gallery" onPress={ openGallery } /> </View> <ScrollView style={{flex: 4/5, backgroundColor: 'skyblue'}}> <Text style={{ fontSize: 100}}>Scroll me plz</Text> <Text style={{ fontSize: 100}}>Scroll me plz</Text> <Text style={{ fontSize: 100}}>Scroll me plz</Text> </ScrollView> </View>
Xib shows empty screen although it works fine in the designer
I really don't understand what I am doing wrong here. I've designed a very very simple .xib file that show a textview and a button. In the designer it works just fine. Scaling works just as would expect it. But when I run the program in the simulator I only get an empty screen. A few times I have seen the lower part of the button just beneath the navigation bar which leads me to the conclusion that the views must be somewhere at the top outside the viewable area. As you can see in the images below I've added several constraints to the views that scale the views in the designer just fine. I've tried adding top spacing. Contain the views in a StackView but nothing seems to do the trick. What am I missing? Here's the code that start the view using MvvmCross. /// <summary> /// Call the MvvmCross ShowViewModel method /// </summary> public bool Show<TViewModel>(IMvxBundle presentationBundle = null) where TViewModel : IMvxViewModel { return base.ShowViewModel<TViewModel>(presentationBundle: presentationBundle); } /// <summary> /// Show a view with viewmodel /// </summary> public bool Show<TViewModel>() where TViewModel : IMvxViewModel { return Show<TViewModel>(); } The presentation is handled in a custom viewpresenter: using MvvmCross.Core.ViewModels; using MvvmCross.iOS.Views; using MvvmCross.iOS.Views.Presenters; using MvvmCross.Platform; using Notifier.Classes; using Notifier.Interfaces; using UIKit; using static Notifier.Classes.ViewModelController; namespace Notifier.iOS.Classes.MvvmCross { public class ViewPresenter : MvxIosViewPresenter { private IMvxIosViewCreator _viewCreator; private IPlatformLog _log; private IPlatformLog Log => _log == null ? _log = Mvx.Resolve<IPlatformLog>() : _log; protected IMvxIosViewCreator ViewCreator { get { return _viewCreator ?? (_viewCreator = Mvx.Resolve<IMvxIosViewCreator>()); } } public ViewPresenter(IUIApplicationDelegate applicationDelegate, UIWindow window) : base(applicationDelegate, window) { } public override void Show(MvxViewModelRequest request) { base.Show(request); } } } Here's the content of the .xib: <?xml version="1.0" encoding="UTF-8" standalone="no"?> <document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="12120" systemVersion="16F73" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES"> <dependencies> <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="12088"/> <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/> </dependencies> <objects> <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="HomeView"> <connections> <outlet property="view" destination="2" id="RRd-Eg-VrN"/> <outlet property="Registration" destination="11" id="name-outlet-11"/> </connections> </placeholder> <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/> <view contentMode="scaleToFill" id="2" horizontalHuggingPriority="1"> <rect key="frame" x="0.0" y="0.0" width="600" height="600"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/> <subviews> <textView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" textAlignment="natural" id="10" translatesAutoresizingMaskIntoConstraints="NO"> <rect key="frame" x="16" y="16" width="568" height="128"/> <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/> <string key="text">Lorem ipsum dolor sit er elit lamet, consectetaur cillium adipisicing pecu, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nam liber te conscient to factor tum poen legum odioque civiuda.</string> <fontDescription key="fontDescription" type="system" pointSize="14"/> <textInputTraits key="textInputTraits" autocapitalizationType="sentences"/> </textView> <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" id="11" translatesAutoresizingMaskIntoConstraints="NO"> <rect key="frame" x="16" y="188" width="568" height="30"/> <state key="normal" title="Button"> <color key="titleShadowColor" white="0.5" alpha="1" colorSpace="calibratedWhite"/> </state> </button> </subviews> <constraints> <constraint id="14" firstItem="2" firstAttribute="trailing" secondItem="10" secondAttribute="trailing" constant="16"/> <constraint id="15" firstItem="10" firstAttribute="leading" secondItem="2" secondAttribute="leading" constant="16"/> <constraint id="16" firstItem="11" firstAttribute="leading" secondItem="2" secondAttribute="leading" constant="16"/> <constraint id="17" firstItem="2" firstAttribute="trailing" secondItem="11" secondAttribute="trailing" constant="16"/> </constraints> </view> </objects> <simulatedMetricsContainer key="defaultSimulatedMetrics"> <simulatedScreenMetrics key="destination" type="retina47"/> </simulatedMetricsContainer> </document> This is the generic view in the designer: This is the designer for a specifice iPhone: And this is what I see in the simulator:
It should be due to constraints problem. Please check whether your constraint is define correctly. When the constraint is define correctly, you should see blue lines only when select your view in xib. From your screenshots, you are only defining leading and trailing constraints. Please also define the top and height constraint.
Copying from .xib to .storyboard and retaining IBOutlet connections
I'm migrating old app from .xib-s to .storyboard-s. Those .xibs have many IBOutlet connections and it is very time consuming to copy&paste the view and recreate them. I was wondering if there is a way to do this seamlessly. Anybody knows solution to this problem?
Yes there is a way. Ensure the storyboard view controller scene has the correct class set for the view controller. Right click on the xib file, and select Open As -> Source Code. Locate the <subviews> ... </subviews> pair of tags, and copy the section. Open the storyboard in the same way (Open As -> Source Code) and locate the corresponding view controller in the xml (marked by an xml comment eg <!--MyViewController>), and copy and paste you subviews xml from the xib, inside the view controllers <view> ... </view> tags. Eg <viewController id="vXZ-lx-hvc" customClass="TwoViewController" sceneMemberID="viewController"> <layoutGuides> <viewControllerLayoutGuide type="top" id="jyV-Pf-zRb"/> <viewControllerLayoutGuide type="bottom" id="2fi-mo-0CV"/> </layoutGuides> <view key="view" contentMode="scaleToFill" id="kh9-bI-dsS"> <rect key="frame" x="0.0" y="0.0" width="320" height="568"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <subviews> <button opaque="NO" contentMode="scaleToFill" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="fLe-1C-hTu"> <rect key="frame" x="116" y="244" width="46" height="30"/> <state key="normal" title="Button"> <color key="titleShadowColor" white="0.5" alpha="1" colorSpace="calibratedWhite"/> </state> </button> </subviews> <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/> </view> </viewController> Repeat the above steps with the <connections> ... </connections> to copy across all the IBOutlets. Note that the connections go underneath the <view> .. </view> tags, but inside the <viewController> ... </viewController> <viewController id="vXZ-lx-hvc" customClass="TwoViewController" sceneMemberID="viewController"> <layoutGuides> <viewControllerLayoutGuide type="top" id="jyV-Pf-zRb"/> <viewControllerLayoutGuide type="bottom" id="2fi-mo-0CV"/> </layoutGuides> <view key="view" contentMode="scaleToFill" id="kh9-bI-dsS"> <rect key="frame" x="0.0" y="0.0" width="320" height="568"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <subviews> <button opaque="NO" contentMode="scaleToFill" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="fLe-1C-hTu"> <rect key="frame" x="116" y="244" width="46" height="30"/> <state key="normal" title="Button"> <color key="titleShadowColor" white="0.5" alpha="1" colorSpace="calibratedWhite"/> </state> <connections> <action selector="samButtonTap:" destination="vXZ-lx-hvc" eventType="touchUpInside" id="1sQ-0S-S8z"/> </connections> </button> </subviews> <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/> </view> <connections> <outlet property="samButton" destination="fLe-1C-hTu" id="8GK-Nn-Loy"/> </connections> </viewController> You'll notice from the second snippet that IBActions are represented with the view, where as IBOutlets are represented together after the subviews have been declared. You may need to do more, depending on how complex you xib file is. If you decide to recreate some of your xib components rather than copy them across the ids will change, so be aware of that. Don't forget to delete you xib file from the project once you're done.