Code Examples
Supernova produces clean, valid code for Flutter, iOS, Android and React Native. However, we know just how bold this claim is! Since we are very proud of the quality the code Supernova produces, here are some examples of how the code actually looks like! If you are interested in a specific platform, select one of the following: Flutter, iOS, Android, React Native. If you want to see a full example of what Supernova is capable of, we've published some on our GitHub page.
This is the screen used in the following examples.
It contains navigation bar, map, some overlays and informational view at the bottom
Flutter Example
In the following example, you'll find a code required to build the screen in Flutter using Dart. The layout is calculated from Starlight rules to pure Flexbox definitions. You can use both Cupertino and material UI kits (material is exported by default).
Supernova currently doesn't support custom widgets, but as the code quality would benefit greatly from it, but we are working on the full support.
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
class EventDetailWidget extends StatelessWidget {
void onGroupPressed(BuildContext context) => Navigator.pop(context);
void onLeftItemPressed(BuildContext context) {
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
"Guess who's back?",
style: TextStyle(
color: Color.fromARGB(255, 255, 255, 255),
fontSize: 17,
fontFamily: "Lato",
),
),
leading: IconButton(
onPressed: () => this.onGroupPressed(context),
icon: Image.asset("assets/images/group-2.png",),
),
actions: [
FlatButton(
onPressed: () => this.onLeftItemPressed(context),
textColor: Color.fromARGB(255, 255, 255, 255),
child: Text(
"Events",
style: TextStyle(
color: Color.fromARGB(255, 0, 0, 0),
fontSize: 12,
fontFamily: "",
),
textAlign: TextAlign.left,
),
),
],
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment(-0.014, 0.515),
end: Alignment(1.014, 0.485),
stops: [
0,
1,
],
colors: [
Color.fromARGB(255, 248, 132, 98),
Color.fromARGB(255, 140, 28, 140),
],
),
),
),
),
body: Container(
constraints: BoxConstraints.expand(),
decoration: BoxDecoration(
color: Color.fromARGB(255, 244, 242, 244),
),
child: Stack(
alignment: Alignment.center,
children: [
Positioned(
left: 0,
top: 0,
right: 0,
bottom: 0,
child: Stack(
alignment: Alignment.center,
children: [
Positioned(
left: 0,
top: 0,
right: 0,
bottom: 0,
child: GoogleMap(
onMapCreated: (controller) {
},
),
),
Positioned(
left: 0,
right: 0,
bottom: 0,
child: Container(
height: 95,
child: Stack(
alignment: Alignment.topCenter,
children: [
Positioned(
left: 0,
top: 15,
right: 0,
child: Container(
height: 80,
decoration: BoxDecoration(
color: Color.fromARGB(255, 255, 255, 255),
),
child: Container(),
),
),
Positioned(
left: 9,
top: -1,
right: 20,
child: Container(
height: 82,
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Align(
alignment: Alignment.topLeft,
child: Container(
width: 82,
height: 82,
child: Image.asset(
"assets/images/avatar-2.png",
fit: BoxFit.none,
),
),
),
Align(
alignment: Alignment.topLeft,
child: Container(
width: 122,
height: 51,
margin: EdgeInsets.only(left: 8, top: 25),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Align(
alignment: Alignment.topLeft,
child: Text(
"Guess who’s back?",
style: TextStyle(
color: Color.fromARGB(255, 15, 15, 15),
fontSize: 14,
fontFamily: "Lato",
fontWeight: FontWeight.w700,
),
textAlign: TextAlign.left,
),
),
Align(
alignment: Alignment.topLeft,
child: Container(
margin: EdgeInsets.only(top: 3),
child: Text(
"Happening in 20h, Bajkonur",
style: TextStyle(
color: Color.fromARGB(255, 0, 0, 0),
fontSize: 10,
fontFamily: "Lato",
),
textAlign: TextAlign.left,
),
),
),
Align(
alignment: Alignment.topLeft,
child: Container(
margin: EdgeInsets.only(top: 7),
child: Opacity(
opacity: 0.4,
child: Text(
"Event posted by Laika",
style: TextStyle(
color: Color.fromARGB(255, 0, 0, 0),
fontSize: 10,
fontFamily: "Lato",
),
textAlign: TextAlign.left,
),
),
),
),
],
),
),
),
Spacer(),
Align(
alignment: Alignment.topLeft,
child: Container(
width: 48,
height: 48,
margin: EdgeInsets.only(top: 28),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
height: 29,
margin: EdgeInsets.symmetric(horizontal: 10),
child: Image.asset(
"assets/images/group.png",
fit: BoxFit.none,
),
),
Spacer(),
Text(
"Coming",
style: TextStyle(
color: Color.fromARGB(255, 140, 28, 140),
fontSize: 14,
fontFamily: "Lato",
),
textAlign: TextAlign.left,
),
],
),
),
),
],
),
),
),
],
),
),
),
],
),
),
Positioned(
child: Container(
width: 185,
height: 185,
child: Image.asset(
"assets/images/icon-event-area.png",
fit: BoxFit.fill,
),
),
),
],
),
),
);
}
}
iOS Example
In the following example, you'll find a code required to build the screen in iOS using Swift 5. The layout is calculated from Starlight rules to pure Auto Layout definitions. This code is generated with UI type Code. You can switch to Storyboards and XIBs where the code will look very different (most of the definitions will be moved to storyboards instead).
//
// EventDetailViewController.swift
// Spacebook
//
// Created by Supernova.
// Copyright © 2019 Supernova. All rights reserved.
//
// --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
// MARK: - Import
import UIKit
import MapKit
// --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
// MARK: - Implementation
class _EventDetailViewController: UIViewController {
// --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
// MARK: - Properties
fileprivate var eventDetailView: UIView!
fileprivate var bgMapTempMapView: MKMapView!
fileprivate var iconEventAreaImageView: UIImageView!
fileprivate var footerView: UIView!
fileprivate var bgView: UIView!
fileprivate var avatarImageView: UIImageView!
fileprivate var guessWhoSBackLb: UILabel!
fileprivate var happeningIn20hBaLb: UILabel!
fileprivate var eventPostedByLaikLb: UILabel!
fileprivate var comingView: UIView!
fileprivate var groupImageView: UIImageView!
fileprivate var comingLb: UILabel!
fileprivate var groupBarButtonItem: UIBarButtonItem!
fileprivate var leftItemBarButtonItem: UIBarButtonItem!
// --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
// MARK: - Lifecycle
override public func viewDidLoad() {
super.viewDidLoad()
self.setupComponents()
self.setupLayout()
self.setupUI()
self.setupGestureRecognizers()
self.setupLocalization()
// Do any additional setup after loading the view, typically from a nib.
}
override public func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
// Navigation bar, if any
self.navigationController?.setNavigationBarHidden(false, animated: true)
}
// --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
// MARK: - Setup
private func setupComponents() {
// Setup eventDetailView
self.view.backgroundColor = UIColor(red: 0.957, green: 0.949, blue: 0.957, alpha: 1) /* #F4F2F4 */
self.view.translatesAutoresizingMaskIntoConstraints = true
// Setup bgMapTempMapView
self.bgMapTempMapView = MKMapView()
self.bgMapTempMapView.isZoomEnabled = true
self.bgMapTempMapView.isScrollEnabled = true
self.bgMapTempMapView.isRotateEnabled = true
self.bgMapTempMapView.isPitchEnabled = true
self.bgMapTempMapView.showsBuildings = true
self.bgMapTempMapView.showsCompass = true
self.bgMapTempMapView.showsScale = false
self.bgMapTempMapView.showsTraffic = false
self.bgMapTempMapView.showsPointsOfInterest = true
self.bgMapTempMapView.showsUserLocation = false
self.bgMapTempMapView.backgroundColor = UIColor.clear
self.bgMapTempMapView.camera = MKMapCamera(lookingAtCenter: CLLocationCoordinate2D(latitude: 37.79, longitude: -122.41), fromDistance: 10000, pitch: 0, heading: 0)
self.view.addSubview(self.bgMapTempMapView)
self.bgMapTempMapView.translatesAutoresizingMaskIntoConstraints = false
// Setup iconEventAreaImageView
self.iconEventAreaImageView = UIImageView()
self.iconEventAreaImageView.backgroundColor = UIColor.clear
self.iconEventAreaImageView.image = UIImage(named: "icon-event-area")
self.iconEventAreaImageView.contentMode = .scaleToFill
self.view.addSubview(self.iconEventAreaImageView)
self.iconEventAreaImageView.translatesAutoresizingMaskIntoConstraints = false
// Setup footerView
self.footerView = UIView(frame: .zero)
self.footerView.backgroundColor = UIColor.clear
self.view.addSubview(self.footerView)
self.footerView.translatesAutoresizingMaskIntoConstraints = false
// Setup bgView
self.bgView = UIView(frame: .zero)
self.bgView.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1) /* #FFFFFF */
self.footerView.addSubview(self.bgView)
self.bgView.translatesAutoresizingMaskIntoConstraints = false
// Setup avatarImageView
self.avatarImageView = UIImageView()
self.avatarImageView.backgroundColor = UIColor.clear
self.avatarImageView.image = UIImage(named: "avatar-2")
self.avatarImageView.contentMode = .center
self.footerView.addSubview(self.avatarImageView)
self.avatarImageView.translatesAutoresizingMaskIntoConstraints = false
// Setup guessWhoSBackLb
self.guessWhoSBackLb = UILabel()
self.guessWhoSBackLb.numberOfLines = 0
self.guessWhoSBackLb.text = "Guess who’s back?"
self.guessWhoSBackLb.textColor = UIColor(red: 0.059, green: 0.059, blue: 0.059, alpha: 1) /* #0F0F0F */
self.guessWhoSBackLb.textAlignment = .left
self.guessWhoSBackLb.font = UIFont(name: "Lato-Bold", size: 14)
self.guessWhoSBackLb.backgroundColor = UIColor.clear
self.footerView.addSubview(self.guessWhoSBackLb)
self.guessWhoSBackLb.translatesAutoresizingMaskIntoConstraints = false
// Setup happeningIn20hBaLb
self.happeningIn20hBaLb = UILabel()
self.happeningIn20hBaLb.numberOfLines = 0
self.happeningIn20hBaLb.text = "Happening in 20h, Bajkonur"
self.happeningIn20hBaLb.textColor = UIColor(red: 0, green: 0, blue: 0, alpha: 1) /* #000000 */
self.happeningIn20hBaLb.textAlignment = .left
self.happeningIn20hBaLb.font = UIFont(name: "Lato-Regular", size: 10)
self.happeningIn20hBaLb.backgroundColor = UIColor.clear
self.footerView.addSubview(self.happeningIn20hBaLb)
self.happeningIn20hBaLb.translatesAutoresizingMaskIntoConstraints = false
// Setup eventPostedByLaikLb
self.eventPostedByLaikLb = UILabel()
self.eventPostedByLaikLb.numberOfLines = 0
self.eventPostedByLaikLb.text = "Event posted by Laika"
self.eventPostedByLaikLb.textColor = UIColor(red: 0, green: 0, blue: 0, alpha: 1) /* #000000 */
self.eventPostedByLaikLb.textAlignment = .left
self.eventPostedByLaikLb.font = UIFont(name: "Lato-Regular", size: 10)
self.eventPostedByLaikLb.backgroundColor = UIColor.clear
self.eventPostedByLaikLb.alpha = 0.4
self.footerView.addSubview(self.eventPostedByLaikLb)
self.eventPostedByLaikLb.translatesAutoresizingMaskIntoConstraints = false
// Setup comingView
self.comingView = UIView(frame: .zero)
self.comingView.backgroundColor = UIColor.clear
self.footerView.addSubview(self.comingView)
self.comingView.translatesAutoresizingMaskIntoConstraints = false
// Setup groupImageView
self.groupImageView = UIImageView()
self.groupImageView.backgroundColor = UIColor.clear
self.groupImageView.image = UIImage(named: "group")
self.groupImageView.contentMode = .center
self.comingView.addSubview(self.groupImageView)
self.groupImageView.translatesAutoresizingMaskIntoConstraints = false
// Setup comingLb
self.comingLb = UILabel()
self.comingLb.numberOfLines = 0
self.comingLb.text = "Coming"
self.comingLb.textColor = UIColor(red: 0.545, green: 0.106, blue: 0.549, alpha: 1) /* #8B1B8C */
self.comingLb.textAlignment = .left
self.comingLb.font = UIFont(name: "Lato-Regular", size: 14)
self.comingLb.backgroundColor = UIColor.clear
self.comingView.addSubview(self.comingLb)
self.comingLb.translatesAutoresizingMaskIntoConstraints = false
}
private func setupUI() {
self.extendedLayoutIncludesOpaqueBars = true
let navigationBar = self.navigationController!.navigationBar
let navigationGradient = CAGradientLayer()
navigationGradient.frame = navigationBar.bounds
navigationGradient.colors = [UIColor(red: 0.97, green: 0.52, blue: 0.38, alpha: 1).cgColor, UIColor(red: 0.55, green: 0.11, blue: 0.55, alpha: 1).cgColor]
navigationGradient.locations = [0.000, 1.000]
navigationGradient.startPoint = CGPoint(x: -0.014, y: 0.515)
navigationGradient.endPoint = CGPoint(x: 1.014, y: 0.485)
navigationBar.setBackgroundImage(UIImage.image(fromLayer: navigationGradient).resizableImage(withCapInsets: UIEdgeInsets.zero, resizingMode: .stretch), for: .default)
navigationBar.tintColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1)
navigationBar.titleTextAttributes = [
NSFontAttributeName : UIFont(name: "Lato-Regular", size: 17)!,
NSForegroundColorAttributeName : UIColor(red: 1, green: 1, blue: 1, alpha: 1),
]
// Left navigation items
self.groupBarButtonItem = UIBarButtonItem(image: UIImage(named: "group-2"), style: .plain, target: self, action: #selector(self.onGroupPressed(_:)))
self.navigationItem.leftBarButtonItems = [ self.groupBarButtonItem ]
// Right navigation items
self.leftItemBarButtonItem = UIBarButtonItem(title: "Events", style: .plain, target: self, action: #selector(self.onLeftItemPressed(_:)))
self.navigationItem.rightBarButtonItems = [ self.leftItemBarButtonItem ]
self.navigationController?.setNavigationBarHidden(false, animated: true)
self.navigationItem.title = "Guess who's back?"
}
private func setupGestureRecognizers() {
}
private func setupLocalization() {
}
// --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
// MARK: - Layout
private func setupLayout() {
// Setup layout for components
// Setup eventDetailView
// Setup bgMapTempMapView
self.bgMapTempMapView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 0).isActive = true
self.bgMapTempMapView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: 0).isActive = true
self.bgMapTempMapView.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 0).isActive = true
self.bgMapTempMapView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: 0).isActive = true
// Setup iconEventAreaImageView
self.iconEventAreaImageView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor, constant: 0).isActive = true
self.iconEventAreaImageView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor, constant: 0).isActive = true
// Setup footerView
self.footerView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 0).isActive = true
self.footerView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: 0).isActive = true
self.footerView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: 0).isActive = true
self.footerView.heightAnchor.constraint(equalToConstant: 95).isActive = true
// Setup bgView
self.bgView.leadingAnchor.constraint(equalTo: self.footerView.leadingAnchor, constant: 0).isActive = true
self.bgView.trailingAnchor.constraint(equalTo: self.footerView.trailingAnchor, constant: 0).isActive = true
self.bgView.topAnchor.constraint(equalTo: self.footerView.topAnchor, constant: 15).isActive = true
self.bgView.heightAnchor.constraint(equalToConstant: 80).isActive = true
// Setup avatarImageView
self.avatarImageView.leadingAnchor.constraint(equalTo: self.footerView.leadingAnchor, constant: 9).isActive = true
self.avatarImageView.topAnchor.constraint(equalTo: self.footerView.topAnchor, constant: -1).isActive = true
// Setup guessWhoSBackLb
self.guessWhoSBackLb.leadingAnchor.constraint(equalTo: self.avatarImageView.trailingAnchor, constant: 8).isActive = true
self.guessWhoSBackLb.topAnchor.constraint(equalTo: self.footerView.topAnchor, constant: 24).isActive = true
// Setup happeningIn20hBaLb
self.happeningIn20hBaLb.leadingAnchor.constraint(equalTo: self.avatarImageView.trailingAnchor, constant: 8).isActive = true
self.happeningIn20hBaLb.topAnchor.constraint(equalTo: self.guessWhoSBackLb.bottomAnchor, constant: 3).isActive = true
// Setup eventPostedByLaikLb
self.eventPostedByLaikLb.leadingAnchor.constraint(equalTo: self.avatarImageView.trailingAnchor, constant: 8).isActive = true
self.eventPostedByLaikLb.topAnchor.constraint(equalTo: self.happeningIn20hBaLb.bottomAnchor, constant: 7).isActive = true
// Setup comingView
self.comingView.trailingAnchor.constraint(equalTo: self.footerView.trailingAnchor, constant: -20).isActive = true
self.comingView.topAnchor.constraint(equalTo: self.footerView.topAnchor, constant: 27).isActive = true
self.comingView.widthAnchor.constraint(equalToConstant: 48).isActive = true
self.comingView.heightAnchor.constraint(equalToConstant: 48).isActive = true
// Setup groupImageView
self.groupImageView.leadingAnchor.constraint(equalTo: self.comingView.leadingAnchor, constant: 9).isActive = true
self.groupImageView.trailingAnchor.constraint(equalTo: self.comingView.trailingAnchor, constant: -9).isActive = true
self.groupImageView.topAnchor.constraint(equalTo: self.comingView.topAnchor, constant: 0).isActive = true
// Setup comingLb
self.comingLb.leadingAnchor.constraint(equalTo: self.comingView.leadingAnchor, constant: 0).isActive = true
self.comingLb.trailingAnchor.constraint(equalTo: self.comingView.trailingAnchor, constant: 0).isActive = true
self.comingLb.bottomAnchor.constraint(equalTo: self.comingView.bottomAnchor, constant: 0).isActive = true
}
// --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
// MARK: - Status Bar
override public var prefersStatusBarHidden: Bool {
return false
}
override public var preferredStatusBarStyle: UIStatusBarStyle {
return .lightContent
}
// --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
// MARK: - Actions
@IBAction public func onGroupPressed(_ sender: UIView) {
// Pop the navigation stack or dismiss the modal presentation
if let navigationController = self.navigationController, navigationController.viewControllers.first != self {
navigationController.popViewController(animated: true)
} else if self.presentingViewController != nil {
self.dismiss(animated: true, completion: nil)
}
}
@IBAction public func onLeftItemPressed(_ sender: UIView) {
}
}
// --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
// MARK: - Extension _EventDetailViewController
extension _EventDetailViewController: MKMapViewDelegate {
// --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
// MARK: - Methods
public func mapViewWillStartLoadingMap(_ mapView: MKMapView) {
}
public func mapViewDidFinishLoadingMap(_ mapView: MKMapView) {
}
public func mapViewDidFailLoadingMap(_ mapView: MKMapView, withError error: Error) {
}
public func mapView(_ mapView: MKMapView, didSelect view: MKAnnotationView) {
}
}
Android Example
In the following example, you'll find a code required to build the screen in Android using Kotlin. The layout is calculated from Starlight rules to pure Constraint Layout definitions. This code is generated without data binding option, but you can optionally enable it to make work with the data easier. 2 files are required to build the screen - activity class and structure definition file.
/**
* Created by Supernova.
*/
package io.supernova.spacebook.activity
import android.content.Context
import android.view.View
import android.view.MenuItem
import android.support.v7.app.AppCompatActivity
import android.graphics.Color
import com.google.android.gms.maps.MapView
import android.widget.ImageView
import android.os.Bundle
import android.widget.TextView
import android.content.Intent
import android.support.v7.widget.Toolbar
import io.supernova.uitoolkit.drawable.LinearGradientDrawable
import android.view.Menu
import android.graphics.PointF
import io.supernova.spacebook.R
import android.support.constraint.ConstraintLayout
import android.view.MenuInflater
class EventDetailActivity: AppCompatActivity() {
companion object {
fun newIntent(context: Context): Intent {
// Fill the created intent with the data you want to be passed to this Activity when it's opened.
return Intent(context, EventDetailActivity::class.java)
}
}
private lateinit var toolbar: Toolbar
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
this.setContentView(R.layout.event_detail_activity)
this.init()
}
override fun onCreateOptionsMenu(menu: Menu): Boolean {
menuInflater.inflate(R.menu.event_detail_activity_menu, menu)
return true
}
override fun onOptionsItemSelected(menuItem: MenuItem): Boolean {
when (menuItem.itemId) {
android.R.id.home -> {
this.onGroupPressed()
return true
}
R.id.left_item_menu_item -> {
this.onLeftItemPressed()
return true
}
else -> {
return super.onOptionsItemSelected(menuItem)
}
}
}
private fun init() {
// Configure Navigation Bar #2 component
toolbar = this.findViewById(R.id.toolbar)
toolbar.background = LinearGradientDrawable.Builder(this, PointF(-0.01f, 0.51f), PointF(1.01f, 0.49f)).addStop(0f, Color.argb(255, 247, 132, 97)).addStop(1f, Color.argb(255, 139, 27, 139)).build()
this.setupToolbar()
}
fun setupToolbar() {
setSupportActionBar(toolbar)
supportActionBar?.setDisplayHomeAsUpEnabled(true)
// Additional Toolbar setup code can go here.
}
fun onGroupPressed() {
this.finish()
}
fun onLeftItemPressed() {
}
}
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/event_detail_constraint_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F4F2F4">
<com.google.android.gms.maps.MapView
android:id="@+id/bg_map_temp_map_view"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_weight="1"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp"/>
<ImageView
android:id="@+id/icon_event_area_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="@drawable/icon_event_area"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="95dp"
tools:layout_editor_absoluteY="241dp"/>
<android.support.constraint.ConstraintLayout
android:id="@+id/footer_constraint_layout"
android:layout_width="0dp"
android:layout_height="91dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="572dp">
<View
android:id="@+id/bg_constraint_layout"
android:layout_width="0dp"
android:layout_height="77dp"
android:layout_marginTop="14dp"
android:background="#FFFFFF"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="15dp"/>
<ImageView
android:id="@+id/avatar_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="9dp"
android:layout_marginTop="-1dp"
android:scaleType="center"
android:src="@drawable/avatar_2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="9dp"
tools:layout_editor_absoluteY="-1dp"/>
<TextView
android:id="@+id/guess_who_sback_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="23dp"
android:fontFamily="@font/font_lato_bold"
android:gravity="start"
android:text="Guess who’s back?"
android:textColor="#0F0F0F"
android:textSize="13sp"
app:layout_constraintLeft_toRightOf="@+id/avatar_image_view"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="99dp"
tools:layout_editor_absoluteY="24dp"/>
<TextView
android:id="@+id/happening_in20h_ba_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="3dp"
android:fontFamily="@font/font_lato_regular"
android:gravity="start"
android:text="Happening in 20h, Bajkonur"
android:textColor="#000000"
android:textSize="10sp"
app:layout_constraintLeft_toRightOf="@+id/avatar_image_view"
app:layout_constraintTop_toBottomOf="@+id/guess_who_sback_text_view"
tools:layout_editor_absoluteX="99dp"
tools:layout_editor_absoluteY="44dp"/>
<TextView
android:id="@+id/event_posted_by_laik_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="7dp"
android:alpha="0.4"
android:fontFamily="@font/font_lato_regular"
android:gravity="start"
android:text="Event posted by Laika"
android:textColor="#000000"
android:textSize="10sp"
app:layout_constraintLeft_toRightOf="@+id/avatar_image_view"
app:layout_constraintTop_toBottomOf="@+id/happening_in20h_ba_text_view"
tools:layout_editor_absoluteX="99dp"
tools:layout_editor_absoluteY="63dp"/>
<android.support.constraint.ConstraintLayout
android:id="@+id/coming_constraint_layout"
android:layout_width="46dp"
android:layout_height="46dp"
android:layout_marginEnd="19dp"
android:layout_marginTop="26dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="307dp"
tools:layout_editor_absoluteY="27dp">
<ImageView
android:id="@+id/group_image_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="9dp"
android:layout_marginStart="9dp"
android:scaleType="center"
android:src="@drawable/group"
app:layout_constraintHorizontal_weight="0.6"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="9dp"
tools:layout_editor_absoluteY="0dp"/>
<TextView
android:id="@+id/coming_text_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:fontFamily="@font/font_lato_regular"
android:gravity="start"
android:text="Coming"
android:textColor="#8B1B8C"
android:textSize="13sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="31dp"/>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
React Native Example
In the following example, you'll find a code required to build the screen in React Native using JSX. The layout is calculated from Starlight rules to pure Flexbox definitions. Two files are required to implement the screen, the structural definition and styles.
//
// EventDetail
// Spacebook
//
// Created by Supernova.
// Copyright © 2018 Supernova. All rights reserved.
//
import { View, Image, Text, TouchableOpacity } from "react-native"
import React from "react"
import { LinearGradient } from "expo-linear-gradient"
import { MapView } from "expo"
import styles from "./EventDetailStyleSheet"
export default class EventDetail extends React.Component {
static navigationOptions = ({ navigation }) => {
const { params = {} } = navigation.state
return {
headerTransparent: true,
headerBackground: <LinearGradient
start={{
x: -0.01,
y: 0.51,
}}
end={{
x: 1.01,
y: 0.49,
}}
locations={[0, 1]}
colors={["rgb(247, 132, 98)", "rgb(139, 27, 140)"]}
style={styles.navigationBarGradient}/>,
title: "Guess who's back?",
headerTintColor: "white",
headerLeft: <View
style={styles.headerLeftContainer}>
<TouchableOpacity
onPress={params.onGroupPressed ? params.onGroupPressed : () => null}
style={styles.navigationBarItem}>
<Image
source={require("./../../assets/images/group-2.png")}
style={styles.navigationBarItemIcon}/>
</TouchableOpacity>
</View>,
headerRight: <View
style={styles.headerRightContainer}>
<TouchableOpacity
onPress={params.onLeftItemPressed ? params.onLeftItemPressed : () => null}
style={styles.navigationBarItem}>
<Text
style={styles.navigationBarItemTitle}>Events</Text>
</TouchableOpacity>
</View>,
headerStyle: {
},
}
}
constructor(props) {
super(props)
}
componentDidMount() {
this.props.navigation.setParams({
onGroupPressed: this.onGroupPressed,
onLeftItemPressed: this.onLeftItemPressed,
})
}
onGroupPressed = () => {
this.props.navigation.goBack()
}
onLeftItemPressed = () => {
}
render() {
return <View
style={styles.eventDetailView}>
<View
pointerEvents="box-none"
style={{
position: "absolute",
left: 0,
right: 0,
top: 0,
bottom: 0,
}}>
<MapView
showsScale={false}
showsTraffic={false}
style={styles.bgMapTempMapView}/>
<View
style={styles.footerView}>
<View
style={styles.bgView}/>
<View
pointerEvents="box-none"
style={{
position: "absolute",
left: 9,
right: 20,
top: -1,
height: 82,
flexDirection: "row",
alignItems: "flex-start",
}}>
<Image
source={require("./../../assets/images/avatar-2.png")}
style={styles.avatarImage}/>
<View
pointerEvents="box-none"
style={{
width: 122,
height: 51,
marginLeft: 8,
marginTop: 25,
alignItems: "flex-start",
}}>
<Text
style={styles.guessWhoSBackText}>Guess who’s back?</Text>
<Text
style={styles.happeningIn20hBaText}>Happening in 20h, Bajkonur</Text>
<Text
style={styles.eventPostedByLaikText}>Event posted by Laika</Text>
</View>
<View
style={{
flex: 1,
}}/>
<View
style={styles.comingView}>
<Image
source={require("./../../assets/images/group.png")}
style={styles.groupImage}/>
<View
style={{
flex: 1,
}}/>
<Text
style={styles.comingText}>Coming</Text>
</View>
</View>
</View>
</View>
<View
pointerEvents="box-none"
style={{
position: "absolute",
alignSelf: "center",
top: 0,
bottom: 0,
justifyContent: "center",
}}>
<Image
source={require("./../../assets/images/icon-event-area.png")}
style={styles.iconEventAreaImage}/>
</View>
</View>
}
}
//
// EventDetailStyleSheet.js
// Spacebook
//
// Created by Supernova.
// Copyright © 2018 Supernova. All rights reserved.
//
import { StyleSheet } from "react-native"
const styles = StyleSheet.create({
navigationBarItemTitle: {
color: "white",
},
navigationBarGradient: {
flex: 1,
},
headerLeftContainer: {
flexDirection: "row",
marginLeft: 8,
},
navigationBarItemIcon: {
tintColor: "white",
},
headerRightContainer: {
flexDirection: "row",
marginRight: 8,
},
navigationBarItem: {
},
eventDetailView: {
backgroundColor: "rgb(244, 242, 244)",
flex: 1,
},
bgMapTempMapView: {
backgroundColor: "transparent",
position: "absolute",
left: 0,
right: 0,
top: 0,
bottom: 0,
},
footerView: {
backgroundColor: "transparent",
position: "absolute",
left: 0,
right: 0,
bottom: 0,
height: 95,
},
bgView: {
backgroundColor: "white",
position: "absolute",
left: 0,
right: 0,
top: 15,
height: 80,
},
avatarImage: {
resizeMode: "center",
backgroundColor: "transparent",
width: 82,
height: 82,
},
guessWhoSBackText: {
backgroundColor: "transparent",
color: "rgb(15, 15, 15)",
fontFamily: "Lato-Bold",
fontSize: 14,
fontStyle: "normal",
fontWeight: "bold",
textAlign: "left",
},
happeningIn20hBaText: {
backgroundColor: "transparent",
color: "black",
fontFamily: "Lato-Regular",
fontSize: 10,
fontStyle: "normal",
fontWeight: "normal",
textAlign: "left",
marginTop: 3,
},
eventPostedByLaikText: {
backgroundColor: "transparent",
opacity: 0.4,
color: "black",
fontFamily: "Lato-Regular",
fontSize: 10,
fontStyle: "normal",
fontWeight: "normal",
textAlign: "left",
marginTop: 7,
},
comingView: {
backgroundColor: "transparent",
width: 48,
height: 48,
marginTop: 28,
},
groupImage: {
resizeMode: "center",
backgroundColor: "transparent",
width: null,
height: 29,
marginLeft: 10,
marginRight: 10,
},
comingText: {
color: "rgb(139, 27, 140)",
fontFamily: "Lato-Regular",
fontSize: 14,
fontStyle: "normal",
fontWeight: "normal",
textAlign: "left",
backgroundColor: "transparent",
},
iconEventAreaImage: {
backgroundColor: "transparent",
resizeMode: "stretch",
width: 185,
height: 185,
},
})
export default styles
Updated over 2 years ago